根据一个j的li元素对ul列表进行排序? [英] sorting an ul list according to a li element with jquery?

问题描述

我正在使用<创建水平列表ul>元素，但我想做的是将每个< ul>元素，根据< li>元素.例如

I'm creating a horizontal list with < ul > element but what I want to do is to put each < ul > element in alphabetical order according to a < li > element. For example

<ul class="list">
    <li>Name</li>
    <li>Surname</li>
    <li>Unit</li>
    <li>City</li>
</ul>
<ul class="list">
    <li>John</li>
    <li>Boe</li>
    <li>B.A.</li>
    <li>NY</li>
</ul>
<ul class="list">
    <li>Jane</li>
    <li>Doe</li>
    <li>M.A.</li>
    <li>CA</li>
</ul>

，然后根据姓氏"字段将它们排序.有没有办法用jquery做到这一点?

and put them in order according to Surname field. Is there any way to do this with jquery?

预先感谢

//EDIT//

我正在使用的代码是这样的

The code I'm using is something like this

$.ajax({
    type: 'GET',
    url: 'list.php',
    data: 'id='+id,
    dataType: 'xml',
    success: function(data) {
        var xml;
        if (typeof data == "string") {
            xml = new ActiveXObject("Microsoft.XMLDOM");
            xml.async = false;
            xml.loadXML(data);
        } else {
            xml = data;
        }

        $(xml).find('item').each(function(){
            var id = $(this).find("id").text();
            var name = $(this).find("name").text();
            var surname = $(this).find("surname").text();
            var units = $(this).find("units").text();
            var city = $(this).find("city").text();
            $("#listContainer").append('<ul class="list" id="'+id+'"><li style="width:30px;">'+name+'</li><li style="width:100px;">'+surname+'</li><li style="width:100px;">'+units+'</li><li style="width:100px;">'+city+'</li></ul>');
        }); //close each(   
    }
}); 

推荐答案

工作演示

$('.grid ul:gt(0)').each(function() {
    var txt1 = $(this).children('li:eq(1)').text();
    $(this).data('name', txt1);
});

var items = $('.grid ul');
items.sort(function(a, b) {
    var chA = $(a).data('name');
    var chB = $(b).data('name');
    if (chA < chB) return -1;
    if (chA > chB) return 1;
    return 0;
});
var grid = $('.grid');
$(grid).append(items);

和HTML

<div class="grid">
    <ul class="list">
        <li>Name</li>
        <li>Surname</li>
        <li>Unit</li>
        <li>City</li>
    </ul>
    <ul class="list">
        <li>John</li>
        <li>Boe</li>
        <li>B.A.</li>
        <li>NY</li>
    </ul>
    <ul class="list">
        <li>Jane</li>
        <li>Doe</li>
        <li>M.A.</li>
        <li>CA</li>
    </ul>
    <ul class="list">
        <li>Lin</li>
        <li>Zyan</li>
        <li>M.A.</li>
        <li>OR</li>
    </ul>
    <ul class="list">
        <li>Matt</li>
        <li>Albright</li>
        <li>M.A.</li>
        <li>CA</li>
    </ul>
</div>

将导致:

工作方式:
我们在所需的li :eq()
中查找文本 并将每个UL元素的文本设置为jQuery .data().
比起我们按检索到的.data()文本对ul进行排序-按字母顺序！

How it works:
We look for the text inside the desired li :eq()
and we set this text as a jQuery .data() for each UL element.
Than we just sort the ul by the retrieved .data() text - alphabetically!

祝您编程愉快！

这篇关于根据一个j的li元素对ul列表进行排序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！