Сортировка по код элемента с помощью JQuery

Question

У меня есть этот код:

<li id="pi_div2"></li> 
<li id="pi_div5"></li> 
<li id="pi_div4"></li> 

Мне нужно сортировать так:

<li id="pi_div2"></li> 
<li id="pi_div4"></li> 
<li id="pi_div5"></li> 

Теперь мой скрипт:

<script> 
    $("li[id*=pi_div]").sort(function(a,b) { 
     if(a.id < b.id) { 
      return -1; 
     } 
     else { 
      return 1; 
     } 
    }).each(function() { console.log($(this).attr("id"));}); 
</script> 

Answer 1

На основе исходного HTML, вы могли бы сделать что-то вроде этого:

Html:

<ul id="cat"> 
    <li id="3">Text 3</li> 
    <li id="1">Text 1</li> 
    <li id="2">Text 2</li> 
</ul> 

JavaScript:

$("#cat li").sort(function (a, b) { 
    return parseInt(a.id) > parseInt(b.id); 
}).each(function() { 
    var elem = $(this); 
    elem.remove(); 
    $(elem).appendTo("#cat"); 
}); 

Заканчивать this fiddle.

---

EDIT:

Как @KiKo правильно указал, приведенный выше код брейки, если у вас есть список более десяти элементов. Вы можете исправить это, заменив «больше» в функции сортировки минусом.

Html:

<ul id="cat"> 
    <li id="3">Text 3</li> 
    <li id="2">Text 2</li> 
    <li id="1">Text 1</li> 
    <li id="9">Text 9</li> 
    <li id="11">Text 11</li> 
    <li id="5">Text 5</li> 
    <li id="7">Text 7</li> 
    <li id="6">Text 6</li> 
    <li id="12">Text 12</li> 
    <li id="4">Text 4</li> 
    <li id="10">Text 10</li> 
    <li id="8">Text 8</li> 
</ul> 

JavaScript:

$("#cat li").sort(function(a, b) { 
    return parseInt(a.id) - parseInt(b.id); 
}).each(function() { 
    var elem = $(this); 
    elem.remove(); 
    $(elem).appendTo("#cat"); 
}); 

Here's a new JSFiddle.

Answer 2

Here является решением ,

HTML:

<div class="initial"> 
    <ul id="cat"> 
     <li id="3">Text 3</li> 
     <li id="1">Text 1</li> 
     <li id="2">Text 2</li> 
    </ul> 
</div> 
<div class="new"></div> 

JavaScript:

Во-первых, выяснить, сколько список предметов есть. Затем пройдите через каждый, по порядку, и добавьте его в строку, которую вы в конечном итоге распечатываете на экране.

var size = $('#cat > li').size() 

var string = '<ul>'; 

for(var i = 1; i<=size; i++){ 
    string = string.concat('<li>' + $('#'+i+'').html() + '</li>'); 
} 

string = string.concat('</ul>'); 

$('.new').html(string);