0

jqueryを使用して正規表現を使用して.attr（）上の.eachを検索する前の質問の続きとして、

.each（）を実行する前に、属性をアルファベット順に並べ替えたいと思います。最終的な出力は、属性の順序で子divを追加することです。

<div id="myElement" extra1="a" stuff="z" extra9="c" more="y" extra5="b" /div>

以下のコードで解析すると、値が出力されますb,c,a。必要なのは、最初に要素を順番に並べ替えextra1, extra5, extra9, more, stuffてから、.each（）+正規表現を実行して値が次のようになるようにすることです。a,b,c 

var el = $('#myElement');
var attributes = el[0].attributes;

$.each(attributes,function(i,attr){
var name = attr.nodeName;
var val = attr.nodeValue;
var regex = /^extra\d$/;

  if(name.match(regex)) {
    $(parentDiv).append("<div id="+val+" /div>");
  }
});​

事前にt​​hxアート

4

1 に答える 1

2

このMDNドキュメントによると、属性コレクションは配列ではなくマップであるため、順序は定義されていません。並べ替える場合は、最初に配列に入れて並べ替えてから、並べ替えた配列に対して実行する必要があります.each()。

または、の結果を配列に収集し、.each()それらの結果を並べ替えてから、並べ替えた結果を目的の順序で最後に追加することもできます。あなたのコードを見ると、それは仕事が少ないと思うので、次のように行うことができます：

var el = $('#myElement');
var attributes = el[0].attributes;
var output = [];

$.each(attributes,function(i,attr){
    var name = attr.nodeName;
    var val = attr.nodeValue;
    var regex = /^extra\d$/;

    if(name.match(regex)) {
        output.push("<div id="+val+" /div>");
    }
});​
$(parentDiv).append(output.sort().join(""));

この単純な並べ替えは、属性を辞書式順序に並べ替えることができ、を超えない場合に機能しますextra9。その1桁の数字を超える場合は、数字を数字に変換し、カスタムの並べ替え関数を使用して、次のような正しい並べ替え順序を生成する必要があります。

var el = $('#myElement');
var attributes = el[0].attributes;
var output = [];
var regex = /^extra(\d+)$/;

$.each(attributes,function(i,attr){
    var name = attr.nodeName;
    var val = attr.nodeValue;
    var matches, item;

    if(matches = name.match(regex)) {
        item = {};
        item.html = "<div id="+val+" /div>";
        item.num = parseInt(matches[1], 10);
        output.push(item);
    }
});​
// sort array of objects with a custom sort function
output.sort(function(a, b) {
    return(a.num - b.num);
});
// append data in correct order now that the items are sorted
for (var i = 0; i < output.length; i++) {
    $(parentDiv).append(output[i].html);
}
于 2012-07-07T06:10:29.647 に答える