jquery - DIV タグ内の HTML データの並べ替え

Question

私のhtmlでは、テーブルにデータがありませんが、タグで構造化されています

そのようなものです

<div id="1"> name=abc id=501  </div>
<div id="2"> name=sdc id=502  </div>
<div id="3"> name=xyz id=503  </div>

jquery/javascript php を使用してこれをソートできますか? ?

変数の数に注意してください。つまり、動的に決定されます。

Answer 1

絶対に欲しいのかわかりませんが、IDで並べ替えてから名前で並べ替えてみます。

http://jsfiddle.net/k9aPj/3/

// html
<div id='container'>    
    <div id="3"> name=xyz id=503  </div>
    <div id="1"> name=abc id=501  </div>
    <div id="2"> name=sdc id=502  </div>
</div>


// js code
var parent = document.getElementById('container');
var childs = parent.childNodes;
childs = Array.prototype.slice.call(childs).filter(function(el){
        return el.nodeName == "DIV";
     });

childs.sort(function(a, b){    
    var aValues = a.innerText.split(' ');
    var aName = aValues[0].split("=")[1];
    var aId = aValues[1].split("=")[1];

    var bValues = b.innerText.split(' ');
    var bName = bValues[0].split("=")[1];
    var bId = bValues[1].split("=")[1];

    if( aName != bName ){
       if (aName > bName) return 1;
       if (aName < bName) return -1;
       return parseInt(aId) - parseInt(bId); // sort by id
    }    
});

container.innerHTML = childs.map(function(el){
    return el.outerHTML;
}).join('');

//result is 
name=abc id=501
name=sdc id=502
name=xyz id=503

</ p>

</ p>

Answer 2

デモ

data-attributes (マークアップにデータを保存する正しい方法) を使用するように html を変更しました。今はこのようになっています<div id='2' data-name='sdc' data-id='502'>sdc</div>。.data()これにより、jQuery はメソッドを使用してプロパティを簡単に取得することもできます。

これは名前でソートされます。代わりに ID で並べ替えるには、次のように変更return a.name > b.name ? 1 : -1;しますreturn a.id > b.id ? 1 : -1;

$(function() {
    var alphaSort = $("div").map(function() {
        return {
            htmlId: this.id,
            name: $(this).data('name'),
            id: $(this).data('id')
        };
    }).toArray().sort(function(a, b) {
        return a.name > b.name ? 1: -1;
    });

    $.each(alphaSort, function(i, val) {
        if( $('div[data-name]').last().is('#'+val.htmlId) ) {
            return true; //continue               
        }
        $('div[data-name]').last().after($('#'+val.htmlId));
    });
});​

Answer 3

この方法を使用すると、必要に応じて ID と名前を並べ替えることができると思います。

ライブデモ:

http://jsfiddle.net/oscarj24/VJ3ZR/

HTML:

<div id="3"> name=xyz id=503  </div>
<div id="1"> name=abc id=501  </div>
<div id="2"> name=sdc id=502  </div>

JS:

var arrName = new Array();
var arrId = new Array();

$(function(){

    $('div').map(function(){
        var data = $(this).text().match(/name=(.*) id=(.*)/);
        arrName.push($.trim(data[1]));
        arrId.push(parseInt($.trim(data[2])));      
    });

    arrName.sort();
    arrId.sort();

    alert('Sorted names: ' + arrName + '\nSorted ids: ' + arrId);
});

出力：

並べ替えられた名前: abc、sdc、xyz / 並べ替えられた ID: 501,502,503