Question

我正在尝试将现有元素从DOM中的一个位置移动到另一个位置。我正在使用适用于Chrome的插件“ User 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％”“标志”。

我已经搜索了从google到youtube的所有空间，但是我不明白自己在做什么错。

我知道仅创建可变参数将不起作用，我认为就绪功能将起作用。我也尝试过长度等。

我尝试了以下操作：

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

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获得的元素。我希望这会有所帮助

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

2 个答案: