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

演示

我将您的 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 2

我不知道你绝对想要，但我试试它'按 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 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