Как сортировать элементы DOM при выборе в jQuery?

У меня есть следующие DIV на моей странице:

<div id="pi_div3">
  Div 3
</div>
<div id="pi_div2">
  Div 2
</div>
<div id="pi_div1">
  Div 1
</div>
<div id="pi_div6">
  Div 6
</div>
<div id="pi_div5">
  Div 5
</div>
<div id="pi_div4">
  Div 4
</div>

Я пытаюсь выбрать Divs, используя код jQuery $("div[id*=pi_div]").

Мне нужно, чтобы divs сортировались по их идентификаторам, когда я делаю каждый() на селекторе. Когда я прохожу через DIV, порядок должен быть: PI_DIV1, PI_DIV2, PI_DIV3, PI_DIV4, PI_DIV5, PI_DIV6. Как я могу сделать это в jQuery?

Ответ 1

Вы можете позвонить .sort(), прежде чем вызывать .each()

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

EDIT: Мне было интересно, почему другие ответы удаляют часть pi_div идентификатора, и я получаю ее. Если вы сравните на основе "строк" pi_div10, появится перед pi_div2.

Ответ 2

$("div[id^=pi_div]").sort(function (a, b) {
    return a.id.replace('pi_div', '') > b.id.replace('pi_div', '');
}).foo();

http://jsfiddle.net/KrX7t/

Ответ 3

Если вы также хотите их сортировать на странице

$('div[id^="pi_div"]').sort(function (a, b) {
    var re = /[^\d]/g;
    return ~~a.id.replace(re, '') > ~~b.id.replace(re, '');
})
.appendTo("#container");

Обратите внимание на ~~, который преобразует значения в целые числа, иначе они будут сравниваться как строки.

См. http://jsfiddle.net/Xjc2T/

Ответ 4

Я бы использовал метод Array.sort. http://jsfiddle.net/LJWrg/

var divArr = $("div[id*=pi_div]");
function cleanId(id) {
    return parseInt(id.replace("pi_div",""),10);
}
Array.prototype.sort.call(divArr,function(a,b) {
    return cleanId(a.id) > cleanId(b.id);
});
divArr.each(function(){
    console.log(this.id);
});

jQuery действительно использует этот метод для внутреннего определения, поэтому вы можете сократить его до этого (однако он использует недокументированные методы) http://jsfiddle.net/LJWrg/1/:

var divArr = $("div[id*=pi_div]");
function cleanId(id) {
    return parseInt(id.replace("pi_div",""),10);
}
divArr.sort(function(a,b) {
    return cleanId(a.id) > cleanId(b.id);
});
divArr.each(function(){
    console.log(this.id);
});