Question

我的代码如下：

<div class="a">Main</div>
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
<div class="a">Another</div>
<div class="b">4</div>
<div class="b">5</div>

我希望输出为：

<div class="a">Main</div>
<div class="b">3</div>
<div class="b">2</div>
<div class="b">1</div>
<div class="a">Another</div>
<div class="b">5</div>
<div class="b">4</div>

我试图使用以下内容，但它无法正常工作：

$.fn.reverseOrder = function() {
    return this.each(function() {
        $(this).prependTo( $(this).parent() );
    });
};

$('.b').reverseOrder();

因为它将所有b div翻转到顶部。我有点失落。知道如何实现这个目标吗？

我不希望修改代码以在其中添加更多div以包含它们，因为它会破坏我的其他代码（此处未提供）。

我想我必须使用nextAll和nextUntil函数。

Answer 1

首先使用div“a”找到最后class。然后移动当前div。

$.fn.reverseOrder = function() {
    var $Last;
    // get all divs
    var $All = $(this).parent().find('> div');
    return this.each(function(iIndex1, oElem1) {
        $Last = null;
        // for each div search last div with class 'a'
        $All.each(function(iIndex2, oElem2) {
            if ($(oElem2).hasClass('a')) {
                // if it has the class 'a', remember this div
                $Last = $(oElem2);
            } else if (oElem2 == oElem1) {
                // if current element has reached, break the each loop
                return false;
            }
        });
        // if a div with class 'a' could be found ...
        if ($Last !== null) {
            // move current b element after the last div with class 'a'
            $Last.after(oElem1);
        }
    });
};

$('.b').reverseOrder();

另见jsfiddle。

=== UPDATE ===

这里有另一种选择：

$.fn.reverseOrder = function() {
    return this.each(function(iIndex1, oElem1) {
        // get the previous element until it's empty or has the class 'a'
        var $Last = $(oElem1).prev();
        while($Last.length > 0 && !$Last.hasClass('a')) {
            $Last = $Last.prev();
        }
        // if it has a class 'a' move the current element
        if ($Last.hasClass('a')) {
            $Last.after(oElem1);
        }
    });
};

$('.b').reverseOrder();

另见next jsfiddle。

Answer 2

您的html中没有父级b，因此您应该使用div使用类a

围绕它

<div class="a">Main</div>
<div class='a'>
    <div class="b">1</div>
    <div class="b">2</div>
    <div class="b">3</div>
</div>
<div class="a">Another</div>
<div class='a'>
    <div class="b">4</div>
    <div class="b">5</div>
</div>

而且你可以做到这一点

$('.a>.b').each(function(){
   $(this).parent().prepend($(this))
})

您可以在这里查看http://jsfiddle.net/pMtYV/1/

分隔符内的Javascript逆序

2 个答案: