从每个函数交换 div 会重复两次 jQuery

Question

我想使用 jquery 交换 2 个 div，但是当我尝试使用 insertAfter() 交换它时，插入了两次。只是想指定每个父元素只需要交换一次div。

所以在每个父元素中 wcmsd-step-container 我需要在 wcmsd-step-title class 下方插入 wcmsd-checkbox-item-description class。但是交换时它会重复两次。

谁能指出在我的 jQuery 代码中使用什么函数是正确的？

jQuery(document).ready(function() {
  jQuery('.wcmsd-step-container').each(function() {
    jQuery('.wcmsd-checkbox-item-description').insertAfter(jQuery('.wcmsd-step-title'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Step 1-->
<div class="wcmsd-step-container">

  <h2 class="wcmsd-step-title">What type of photo do you want?</h2>

  <div class="wcmsd-step-content">
    <label class="wcmsd-checkbox-item-title">choose your photo</label>
    <p class="wcmsd-checkbox-item-description">Select up to 122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
  </div>

</div>

<!--Step 2-->
<div class="wcmsd-step-container">

  <h2 class="wcmsd-step-title">What type of video do you want?</h2>

  <div class="wcmsd-step-content">
    <label class="wcmsd-checkbox-item-title">choose your video</label>
    <p class="wcmsd-checkbox-item-description">Select up to 322. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
  </div>

</div>

Answer 1

循环内的代码与循环无关，所以它只是 for (i=0;i<2;++i) 内部代码说“获取所有描述并将它们全部放在每个标题之后” - 你得到两个，因为有两个，如果你有 3 个，你会在每个标题后得到 3 个。

您需要在循环内使用 this 以确保正确的元素移动到正确的位置。

  $('.wcmsd-step-container').each(function() {
    $(this).find('.wcmsd-checkbox-item-description').insertAfter($(this).find('.wcmsd-step-title'));
  });

更新了带有按钮的代码段 before/after

$("#btn").click(() => {
  $('.wcmsd-step-container').each(function() {
    $(this).find('.wcmsd-checkbox-item-description').insertAfter($(this).find('.wcmsd-step-title'));
  });
});

.wcmsd-step-content { background-color: yellow; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn">click me</button>

<!--Step 1-->
<div class="wcmsd-step-container">

  <h2 class="wcmsd-step-title">What type of photo do you want?</h2>

  <div class="wcmsd-step-content">
    <label class="wcmsd-checkbox-item-title">choose your photo</label>
    <p class="wcmsd-checkbox-item-description">Select up to 122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
  </div>

</div>

<!--Step 2-->
<div class="wcmsd-step-container">

  <h2 class="wcmsd-step-title">What type of video do you want?</h2>

  <div class="wcmsd-step-content">
    <label class="wcmsd-checkbox-item-title">choose your video</label>
    <p class="wcmsd-checkbox-item-description">Select up to 322. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p>
  </div>

</div>

从每个函数交换 div 会重复两次 jQuery

Swapping divs from each function gets duplicated twice jQuery

javascript

jquery

swap