我正在用<创建一个水平列表ul>元素,但我想要做的是把每个< ul>根据<按字母顺序排列的元素li>元件.例如
<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>
并根据Surname字段将它们整理好.用jquery有什么办法吗？
提前致谢
//编辑//
我正在使用的代码是这样的
$.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(
}
});
解决方法
WORKING DEMO
$('.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进行排序 – 按字母顺序排列！
快乐的编码！