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

Question

我正在尝试将现有元素从 DOM 中的一个位置移动到另一个位置。我正在为 chrome "User Javascript and 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%”"sign"。

我搜索了从 google 到 youtube 的每个 space，但我不明白我做错了什么。

我知道仅仅创建一个 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

编辑：根据您 post 中的评论和更新后的代码，下面的代码可能符合您的需要。

$(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;
}

Answer 2

所以正如您所说，您需要显示图片下方的元素。

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

首先，根据您的需要获取所有元素。然后包括您要更改的元素（新价格）。然后你可以改变它们。我没有尝试它的来源，但我认为它会正常工作。如果它不起作用，请尝试使用 .parent() 看看是什么元素 jquery get.I 希望它有帮助

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

Move element created in function while manipulate existing page

javascript

jquery

dom-manipulation