22

私のページには次の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>

jQueryコードを使用してDivを選択しようとしています$("div[id*=pi_div]")。

セレクターでeach（）を実行するときに、IDに基づいてdivをソートする必要があります。DIVをループするとき、順序は次のようになります：PI_DIV1、PI_DIV2、PI_DIV3、PI_DIV4、PI_DIV5、PI_DIV6。jQueryでそれを行うにはどうすればよいですか？

4

4 に答える 4

20

.each（）を呼び出す前に.sort （）を呼び出すことができます

$("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"));});

編集：なぜ他の答えがpi_divIDの一部を削除しているのか疑問に思っていたのですが、私はそれを取得しました。「文字列」に基づいて比較すると、pi_div10前に表示されpi_div2ます。

于 2013-02-14T15:53:02.827 に答える
8

ページ上でそれらを視覚的に並べ替える場合も

$('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/を参照してください

于 2013-02-14T16:03:11.177 に答える
6 
$("div[id^=pi_div]").sort(function (a, b) {
    return a.id.replace('pi_div', '') > b.id.replace('pi_div', '');
}).foo();

http://jsfiddle.net/KrX7t/

于 2013-02-14T15:53:53.680 に答える
2

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);
});
于 2013-02-14T15:53:27.053 に答える