Sorting elements in repeating lists with jQuery

Question

I am trying to sort the .depth-3 elements by comment-ID and display them in ascending order . The ul class .children is repeating and also used in all depths, but only the .depth-3 elements need to be sorted (because some of them are replies to eachother and therefore not displayed in ascending order).

How it looks:

<ol class="commentlist">
<li id="comment-677" class="comment byuser comment-author-admin even thread-even depth-1">
  <div id="comment-677">
      <div class="comment-content">comment-677
        </div>
    </div>
    <ul class="children">
        <li id="comment-678" class="comment odd alt depth-2">
            <div id="comment-678">
                <div class="comment-content">comment-678
                </div>
            </div>
            <ul class="children">
                <li id="comment-680" class="comment byuser comment-author-admin even depth-3" data-value="680">
                  <div id="comment-680">
                        <div class="comment-content">comment-680
                        </div>
                    </div>
                </li>
                <li id="comment-686" class="comment byuser comment-author-admin odd alt depth-3" data-value="686">
                    <div id="comment-686">
                        <div class="comment-content">comment-686
                        </div>
                    </div>
                </li>
                <li id="comment-688" class="comment byuser comment-author-admin even depth-3" data-value="688">
                  <div id="comment-688">
                     <div class="comment-content">comment-688
                     </div>
                    </div>
                </li>
                <li id="comment-687" class="comment byuser comment-author-admin odd alt depth-3" data-value="687">
                  <div id="comment-687">
                      <div class="comment-content">comment-687
                        </div>
                    </div>
                </li>
                <li id="comment-689" class="comment byuser comment-author-admin even depth-3" data-value="689">
                  <div id="comment-689">
                      <div class="comment-content">comment-689
                        </div>
                    </div>
                </li>
                <li id="comment-684" class="comment byuser comment-author-admin odd alt depth-3" data-value="684">
                  <div id="comment-684">
                      <div class="comment-content">comment-684
                        </div>
                    </div>
                </li>
            </ul>
        </li>
        <li id="li-comment-681" class="comment byuser comment-author-admin even depth-2">
            <div id="comment-681">
                <div class="comment-content">comment-681
                </div>
            </div>
            <ul class="children">
                <li id="li-comment-682" class="comment byuser comment-author-admin odd alt depth-3" data-value="682">
                    <div id="comment-682">
                        <div class="comment-content">comment-682
                        </div>
                    </div>
                </li>
                <li id="li-comment-690" class="comment byuser comment-author-admin even depth-3" data-value="690">
                    <div id="comment-690">
                        <div class="comment-content">comment-690
                        </div>
                    </div>
                </li>
                <li id="li-comment-683" class="comment byuser comment-author-admin odd alt depth-3" data-value="683">
                    <div id="comment-683">
                        <div class="comment-content">comment-683
                        </div>
                    </div>
                </li>
                <li id="li-comment-685" class="comment byuser comment-author-admin even depth-3" data-value="685">
                    <div id="comment-685">
                        <div class="comment-content">comment-685
                        </div>
                    </div>
                </li>
                <li id="li-comment-691" class="comment byuser comment-author-admin odd alt depth-3" data-value="691">
                    <div id="comment-691">
                        <div class="comment-content">comment-691
                        </div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>

<li id="li-comment-679" class="comment byuser comment-author-admin odd alt thread-odd thread-alt depth-1">
    <div id="comment-679">
        <div class="comment-content">comment-679
        </div>
    </div>
    <ul class="children">
        <li id="li-comment-692" class="comment byuser comment-author-admin even depth-2">
            <div id="comment-691">
                <div class="comment-content">comment-691
                </div>
            </div>
        </li>
    </ul>
</li>

How I want it to look:

<ol class="commentlist">
<li id="677" class="comment byuser comment-author-admin even thread-even depth-1">
  <div id="comment-677">
      <div class="comment-content">comment-677
        </div>
    </div>
    <ul class="children">
        <li id="comment-678" class="comment odd alt depth-2">
            <div id="comment-678">
                <div class="comment-content">comment-678
                </div>
            </div>
            <ul class="children">
                <li id="680" class="comment byuser comment-author-admin even depth-3" data-value="680">
                  <div id="comment-680">
                        <div class="comment-content">comment-680
                        </div>
                    </div>
                </li>
                <li id="comment-684" class="comment byuser comment-author-admin even depth-3" data-value="684">
                  <div id="comment-684">
                      <div class="comment-content">comment-684
                        </div>
                    </div>
                </li>
                <li id="comment-686" class="comment byuser comment-author-admin odd alt depth-3" data-value="686">
                    <div id="comment-686">
                        <div class="comment-content">comment-686
                        </div>
                    </div>
                </li>
            </ul>
        </li>
        <li id="li-comment-681" class="comment byuser comment-author-admin even depth-2">
            <div id="comment-681">
                <div class="comment-content">comment-681
                </div>
            </div>
            <ul class="children">
                <li id="li-comment-682" class="comment byuser comment-author-admin odd alt depth-3" data-value="682">
                    <div id="comment-682">
                        <div class="comment-content">comment-682
                        </div>
                    </div>
                </li>
                <li id="li-comment-683" class="comment byuser comment-author-admin odd alt depth-3" data-value="683">
                    <div id="comment-683">
                        <div class="comment-content">comment-683
                        </div>
                    </div>
                </li>
                <li id="li-comment-690" class="comment byuser comment-author-admin even depth-3" data-value="690">
                    <div id="comment-690">
                        <div class="comment-content">comment-690
                        </div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>

<li id="li-comment-679" class="comment byuser comment-author-admin odd alt thread-odd thread-alt depth-1">
    <div id="comment-679">
        <div class="comment-content">comment-679
        </div>
    </div>
    <ul class="children">
        <li id="li-comment-692" class="comment byuser comment-author-admin even depth-2">
            <div id="comment-691">
                <div class="comment-content">comment-691
                </div>
            </div>
        </li>
    </ul>
</li>

My try, which gets the correct order but all the elements are repeated in every ul

var $wrapper = $( '.children' );

$wrapper.find('.depth-3').sort(function (a, b) {
    return +a.dataset.value - +b.dataset.value;
})
.appendTo( $wrapper );

Here is a fiddle

@MelanciaUK Thanks! Yes, the markup in the result is correct, but the elements are still in the original and wrong order. — psot
– psot, Commented Jun 5, 2014 at 16:06
@MelanciaUK No problem! Thanks again for taking your time with my problem! Update: That works great too! Thanks a lot! — psot
– psot, Commented Jun 5, 2014 at 16:15

Peter Olson · Accepted Answer · 2014-06-05 16:08:41Z

1

Is this what you want? (jsFiddle demo)

$(".depth-2").each(function(){
    var children = $(this).find(".depth-3").sort(function (a, b) {
        return +a.dataset.value - +b.dataset.value;
    });
    $(this).children(".children").empty().append(children);
});

answered Jun 5, 2014 at 16:08

Peter Olson

144k49 gold badges209 silver badges250 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

psot Over a year ago

That looks just right! I'll test it on the server to make sure it works and then accept your answer. Thanks a lot!

Collectives™ on Stack Overflow

Sorting elements in repeating lists with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related