How to sort LI's based on their ID

Question

Trying a bunch of solutions with no workable results. I have code that takes the value of the span and creates an ID for the LI. I then want to sort these LI's DESCENDING based on the LI's ID. Help? Thanks!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="dumb">
    <li>cello<span>2987</span></li>
    <li>zello<span>1723</span></li>
    <li>aello<span>3476</span></li>
</ul>
<script type='text/javascript' src='JQUERY INCLUDE'></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('ul li span').each(function(){
        var pubValue = $(this).html();
        $(this).parent().attr('id', pubValue);
    });
});
</script>
</body>
</html>

well, there are no id's. Did you mean you want to sort by span text? — jAndy, Sep 02 '10 at 19:23
@jAndy: OP has "code that takes the value of the span and creates an ID for the LI". See the existing code. — BoltClock, Sep 02 '10 at 19:24
No, in my description I describe that the code already in my example creates ID's based on the span's value. After that I want to sort the LI's by their ID (they will of course have ID's at that point). — joe, Sep 02 '10 at 19:26

score 11 · Answer 1 · answered Sep 02 '10 at 19:29

11

Let's assume your li nodes had ids.

<ul id="test">
   <li id="4112">blub</li>
   <li id="1422">blaaah</li>
   <li id="6640">hmmmm</li>
   <li id="2221">one more</li>
</ul>

Then you could just call javascripts native array .sort() method, since jQuery wrapped sets are hold in Arrays:

$(function(){
    var elems = $('#test').children('li').remove();
    elems.sort(function(a,b){
        return parseInt(a.id) > parseInt(b.id);
    });
    $('#test').append(elems);
});

Working example: http://www.jsfiddle.net/3uYUq/

answered Sep 02 '10 at 19:29

jAndy

231,737
57
305
359

3

Apparently in Safari, you need `-` instead of `>`. – user113716 Sep 02 '10 at 19:42
@patrick: interesting, so you would need to change the order if you want to have an ascending list? – jAndy Sep 02 '10 at 19:56
jAndy - That appears to be the case. – user113716 Sep 02 '10 at 20:06
Would appreciate your further ideas: What if the argument to sort with is not an ID but a timestamp and is hold in the attribute timestamp="1346467883" ? return parseInt(a.attr('timestamp')) > parseInt(b.attr('timestamp')) doesn't the job. Thanks in advance, Michael – ddlab May 07 '14 at 02:36
almost. But since jQuery passes in the pure DOM Element into such methods, we would need to call `.getAttribute()`, like `parseInt(a.getAttribute('timestamp')) > parseInt(b.getAttribute('timestamp'));`. If there are no "letters" included in that attribute, you can get rid of the whole ´parseInt` also, just pretag the call to `getAttribute()` with a plus sign. – jAndy May 07 '14 at 09:09
How would you accomplish the same thing after the elements have just been created by something like jQuery append – pee2pee Aug 12 '14 at 11:54

score 4 · Answer 2 · answered Sep 02 '10 at 19:41

jAndy beat me to the punch. Here's mine.

$(function() {
  $("li").sort(function(left, right) {
    return parseInt($(left).attr("id")) - parseInt($(right).attr("id"));
  }).each(function() { $("ul").append($(this)); });
});

I'll add that you need

$(function() {

for your IE6 users because IE6 will crash if you try to remove elements from the dom before their parent elements load.

Also, .remove() is redundant because .append() takes care of that.

How to sort LI's based on their ID

2 Answers2

Linked

Related