jquery - jQuery：重新排列元素而不重复

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');
});

但这导致“底部”在每个部分中重复四次。

小提琴：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));
});

演示

Answer 2

您需要针对当前的顶部和底部元素section

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

演示：小提琴