我想使用 jquery 交換 2 個 div，但是當我嘗試使用 insertAfter() 交換它時，被插入兩次。只想指定每個父元素只需要交換一次div。
所以在每個父元素中wcmsd-step-container我需要在wcmsd-checkbox-item-description類下面插入wcmsd-step-title類。但是在交換它時它會重復兩次。
誰能指出在我的 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>uj5u.com熱心網友回復：
回圈內的代碼與回圈無關，所以它只是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'));
});
使用按鈕更新片段以查看之前/之后
$("#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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/448315.html
標籤：javascript jQuery 交换