Question

我们假设你有这样的HTML：

<div class="section">
    <div class="bottom">bottom</div>
    <div class="top">top</div>
</div>
<div class="section">
    <div class="bottom">bottom</div>
    <div class="top">top</div>
</div>

并且您希望使用jQuery将.top移到每个.bottom .section之上。

我试图这样做：

$('.section').each(function (i, obj) {
    $('.bottom').insertAfter('.top');
});

但这导致＆＃34;底部＆＃34;在每个部分重复四次。

小提琴：http://jsfiddle.net/TLejL/

我做错了什么？

Answer 1

尝试在$(this)函数

中使用.each()引用

$('.section').each(function (i, obj) {
    $(this).find('.bottom').insertAfter($(this).find('.top'));
});

或

$('.top').each(function() {
    $(this).closest('.section').prepend($(this));
});

DEMO

Answer 2

你需要瞄准顶级＆amp;当前section

中的底部元素

$('.section .top').after(function (i, obj) {
    return $(this).prev()
});

演示：Fiddle

jQuery：重复排列元素而不重复

2 个答案:

DEMO