javascript - 在操作现有页面时移动在函数中创建的元素

Question

我正在尝试将现有元素从 DOM 中的一个位置移动到另一个位置。我正在使用 chrome 插件“用户 Javascript 和 CSS”，我正在操作的页面是 https://www.kappahl.com/sv-SE/rea/herr/rea/ ？

我想将跨度元素“product-card__percent--sale”移动到“grid-item__image-spacer”下方。但是在 ID 为#Productlist 的网格中什么也没有发生。正如所说，现在我要疯了。

我知道它是在函数中创建的，我必须在调用元素之前检查函数是否完成。至此我走到了这一步Top line is fine but not the rest of the products .结果应该是在每个产品图片的右下角都会有“50%”的“标志”。

我搜索了从谷歌到 youtube 的每个空间，但我不明白我做错了什么。

我知道仅仅创建一个 variabel 是行不通的，我认为 ready 函数会起作用。我也试过长度等。

我试过以下方法:

let a = $(".product-card__percent--sale");

let b = $(".grid-item__image-spacer");

a.insertAfter(b);

和:

$(document).ready(function(){

 if($(".product-card__percent--sale").insertAfter($("header .grid-item__image-spacer")));

    });

这就是我的代码现在的样子

JS

$(".product-card__wrapper").each(function () {
  var newprice = $(this).find('.product-card__percent--sale');
   $(this).find('.grid-item__image-spacer').parent().after(newprice );
});

CSS:

/*Override the old grid*/
#ProductList {
    grid-template-columns: repeat(4, 25%);
    grid-gap: 18.5px;
}

/*Create sale-percent look*/
.product-card__percent--sale {
    color: white;
    background-color: #ee324c;
    border-radius: 50%;
    height: 65px;
    width: 65px;
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
   /* display:inline-block;*/
    font-size: 18px;
    padding: 20px 5px 5px 10px;
}

当我只是编辑现有页面时很难显示代码。很抱歉，但如果有人能帮助我，那就太好了! :)

Answer 1

编辑:根据您帖子中的评论和更新后的代码，以下代码可能符合您的需要。

$(function(){
    setInterval(function() {
        $(".product-card__percent--sale").each(function(){
            $(this).closest(".product-card")
                .find(".grid-item__image-spacer")
                .append($(this));
        });
    }, 200);
})

或

$(function(){
    setInterval(function() {
        $(".product-card__wrapper").each(function () {
            var newprice = $(this).find('.product-card__percent--sale');
            $(this).find('.grid-item__image-spacer')
                .parent().after(newprice );
        });
    }, 200);
})

两者都应该有效。

这是 CSS

/*Override the old grid*/
#ProductList {
    grid-template-columns: repeat(4, 25%);
    grid-gap: 18.5px;
}

/*Create sale-percent look*/
.product-card__percent--sale {
    color: white;
    background-color: #ee324c;
    border-radius: 50%;
    height: 65px;
    width: 65px;
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
   /* display:inline-block;*/
    font-size: 18px;
    padding: 20px 5px 5px 10px;
}

.grid-item__image-spacer{
    position: relative;
}
.product-card__percent--sale{
    position: absolute;
    bottom: 0;
    right: 0;
}

---

---

---

您必须在创建 dom 元素后运行代码，并且

let a = $(".product-card__percent--sale");
let b = $(".grid-item__image-spacer");
a.insertAfter(b);

会将所有数字插入到所有图像中，所以它可以是

setTimeout(function() {
    $(".product-card__percent--sale").each(function(){
        $(this).closest(".product-card__bottom--wrapper")
            .find(".product-card__infoicons").prepend($(this));
    });
}, 10);

或

setInterval(function() {
    $(".product-card__percent--sale").each(function(){
        $(this).closest(".product-card__bottom--wrapper").find(".product-card__infoicons").prepend($(this));
    });
}, 200);

你需要这些来设置位置

.product-card__percent--sale{
    line-height: 25px;
    left: 10px;
    position: relative;
}