jQuery：页面就绪时仅执行一次appendTo()，解决onsale按钮重复添加问题

嘿，我明白你的困扰——处理多个同类别元素时不小心重复操作，导致页面上多出好几个按钮，确实头疼！咱们来一步步搞定这个问题：

核心问题分析 #

你遇到的重复，大概率是因为代码在处理每个.onsale元素时，不小心对所有该类元素执行了操作，而不是逐个单独处理。或者可能误用到了克隆（clone()）方法，导致元素被复制而非移动。

正确的解决方案：逐个处理每个元素 #

用jQuery的.each()方法遍历每个.onsale元素，对单个元素单独执行移除+移动操作，这样每个按钮只会被处理一次，不会重复。

代码示例（移动到指定容器）

假设你要把这些按钮移到页面上方的某个容器（比如#top-container），代码可以这么写：

$(document).ready(function() {
  // 遍历每个.onsale元素，逐个处理
  $('.onsale').each(function() {
    const $currentBtn = $(this);
    // 直接用appendTo移动元素——这个方法会自动把元素从原位置移除，添加到目标容器
    $currentBtn.appendTo('#top-container');
  });
});

如果是要移到每个按钮自身的父容器上方

比如每个.onsale按钮要放到它所在父元素的最顶部，代码可以改成这样：

$(document).ready(function() {
  $('.onsale').each(function() {
    const $currentBtn = $(this);
    // 插入到父元素的第一个子元素之前
    $currentBtn.insertBefore($currentBtn.parent().children().first());
  });
});

避坑要点 #

1. 别用克隆（clone()）：除非你真的需要复制按钮，否则直接操作原元素就好——appendTo/insertBefore这类方法本身就是“剪切+粘贴”的移动操作，不会复制元素。
2. 避免批量操作：不要在循环里对整个.onsale集合执行操作，一定要遍历到单个元素后再处理，确保每个按钮只被移动一次。
3. ready事件本身只执行一次：jQuery的$(document).ready()只会在页面加载完成后触发一次，所以不需要额外用one()来绑定，问题不在事件触发次数，而在元素操作的逻辑上。

如果之前的错误代码是因为循环中重复操作了整个元素集合，换成上面的.each()逐个处理就能解决啦！

内容的提问来源于stack exchange，提问作者Bill Bronson