Блог

У меня есть код, подобный:

 <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 divs в начало. Я немного потерялся. Есть идеи, как этого добиться?

Я не хочу изменять код, чтобы добавлять в него больше divs, чтобы содержать их, поскольку это нарушает другой мой код (здесь не указан).

Я думаю, что мне нужно использовать функции nextAll и nextUntil.

Сначала найдите последний div с class помощью «a». Затем переместите текущий 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 amp;amp; !$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();
  

Также смотрите мой следующий jsfiddle.

В вашем 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 /