分隔符内的 Javascript 倒序

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

首先找到类为“a”的最后一个div。然后移动当前的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 .

===更新===

这里有一个替代方案:

$.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 .