仅在文档准备就绪时触发 appendTo() 一次 (jQuery)

Question

我想在页面加载时删除动态创建的 "onsale" 按钮，并将其放在 DOM 中更靠前的位置。

但是因为有 3 个元素有这个 class 他为每个元素触发 3 次并在每个位置添加 3 个 "onsale" 按钮。

我尝试将它绑定到 jQuery 的 one() 处理程序，并在一些事件之间切换，例如点击、加载、就绪等。什么都没有改变。

还尝试了一个计数器或仅通过 length() 计算元素数量，但与以前相同。

这是我的代码：

$('.onsale').one('click', function () { 

    $('.onsale').appendTo('.woocommerce-loop-product__title');
    console.log('fired!');
});

应该移动的元素：

<span class="onsale">Angebot!</span>

在此处查看实时测试环境（向下滚动到底部）：Link

Answer 1

您只需使用选择器绑定第一个元素：

$( document ).ready(function() { 
   $('.onsale:first').appendTo('.woocommerce-loop-product__title');
});

Fire appendTo() only once when document is ready (jQuery)