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

我试图将现有元素从DOM中的一个位置移动到另一个位置。我正在使用一个用于chrome“用户Javascript和CSS”的插件，我正在操作的页面是

我想把span元素“product-card\uuuu percent--sale”移到“grid-item\uuu image-spacer”下面。但是ID为Productlist的网格中没有任何事情发生。正如我所说的，现在我要发疯了

我知道它是在函数中创建的，我必须在调用元素之前检查函数是否完成。 到目前为止，我已经到了这一点。 结果应该是，在每个产品图像的右下角都会有“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")));

    });

和：

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

CSS:

---

当我只是编辑现有页面时，很难显示代码。很抱歉，但如果有人能帮我，那就太美了！：）

编辑：根据您帖子中的评论和更新的代码，下面的代码可能适合您的需要

$(function(){
    setInterval(function() {
        $(".product-card__percent--sale").each(function(){
            $(this).closest(".product-card")
                .find(".grid-item__image-spacer")
                .append($(this));
        });
    }, 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);

或

你需要这些来设置位置

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

---

所以，正如你所说，你需要显示下面的元素图片

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

---

首先，让你的所有元素都符合你的需求。然后包括您想要更改的元素（新价格）。然后你可以改变它们。我没有来源尝试它，但我认为它会很好的工作。如果它不起作用，请尝试使用.parent（）查看jquery得到的元素。我希望它有帮助

请阅读。把你的问题格式化一点，这样可以提高可读性。我想a现在让它更容易阅读了。我的第一个问题是让它从这里变得更好。你调试过了吗，看看它是否找到了元素？我猜它是动态加载的，元素不在那里。一个简单的

console.log（A.length，b.length）

会显示这一点。很高兴您喜欢它！：）我觉得它也非常棒。你的建议几乎成功了，但它仍然无法访问下面的产品卡销售百分比。它只附加到背线。好近啊！我想当我看到每张图片的右下角时，你会希望它显示在图片的右下角，不管怎样，我编辑了代码，但它仍然需要改进，因为你可以看到星号被数字覆盖。很抱歉，解释得太差了。第一个代码完全符合我的要求，只是它只将更改附加到最上面一行。不在显示所有产品的地方，在导航栏的正下方和侧边栏的旁边。因为这些产品是在用户向下滚动页面时动态创建的，但代码仅在页面加载后触发一次。一种方法是使用

setInterval

执行代码，但这只是一种变通方法，不是完美的解决方案。我会把它添加到帖子里。它对你有用吗？如果你试过的话？对我来说，它和另一个一样，我试着修改它，但仍然什么也没做。我知道这很难解决=（它完全符合我在第一行中的要求，但它仍然无法访问在导航栏下动态创建的其他产品。我的问题是相同的，我也没有来源，只有主页和检查器，然后我使用我在问题中提到的chrome插件。@LittleStarJenny你是说Reafvoriter部分吗？是的s、 您无法更改它们，因为导航栏下的类不同。如果您希望函数对所有这些类都有效，请向它们添加自定义类，如果您无法更改主代码，请再次更改选择器，我认为它们都在文章中。$（“文章”）。每个（函数（）{

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

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