Question

我有像这样的HTML

<div>
<ul id="ulId">
    <li id="liId1">
        <span id="spn1-Li1">YVariable1</span>
        <span id="spn2-Li1">XVariable2</span>
        <span id="spn3-Li1">ZVariable3</span> 
    </li>
    <li id="liId2">
        <span id="spn1-Li2">ZVariable1</span>
        <span id="spn2-Li2">YVariable2</span>
        <span id="spn3-Li2">XVariable3</span> 
    </li>
    <li id="liId3">
        <span id="spn1-Li3">XVariable1</span>
        <span id="spn2-Li3">ZVariable2</span>
        <span id="spn3-Li3">YVariable3</span> 
    </li>
</ul>
</div>

视图有这样的

YVariable1 XVariable2 ZVariable3
ZVariable1 YVariable2 XVariable3
XVariable1 ZVariable2 YVariable3

但我需要根据第一个跨度值对剩余的“＆lt; li＆gt;”进行排序。应该是一样的。表示点击“按按钮排序”后结果如下。

 XVariable1 ZVariable2 YVariable3
 YVariable1 XVariable2 ZVariable3
 ZVariable1 YVariable2 XVariable3

我需要在客户端（javascript或jQuery）。我曾尝试多种方式，但我没有得到我所期待的。

我现在有这个代码，同样改变了类似的方法

$('#btnOrderBy').click(function () {
    var data = [];
    $('#ulId li').each(function (item, value) {
        $('span', value).each(function (i, v) {
            data.push($(this).text());
        });
    });
    console.log(data.sort());
});

Answer 1

我使用了这段代码。

$('#ulId').html($("#ulId li").sort(asc_sort));
function asc_sort(a, b){
    return ($(b).find('span:first-child').text()) < ($(a).find('span:first-child').text()) ? 1 : -1;    
}

link to jsFiddle

Answer 2

这是What is the easiest way to order a <UL>/<OL> in jQuery?的重复：

var items = $('li').get();
items.sort(function(a,b){
  var keyA = $(a).text();
  var keyB = $(b).text();

  if (keyA < keyB) return -1;
  if (keyA > keyB) return 1;
  return 0;
});
var ul = $('ul');
$.each(items, function(i, li){
  ul.append(li);
});

http://jsfiddle.net/kEB7p/

Answer 3

如果你想让LI保持在他们的位置并且只对跨度进行排序

，你可以这样做

首先存储排序顺序

var orderArr = [];
$('#ulId span:nth-child(1)').sort(function(a,b){
    var aa = $(a).text();
    var bb = $(b).text();
    orderArr.push(aa < bb ? -1 : aa > bb ? 1 : 0);
});

然后你想从每个LI获取跨度，将它们放在一个数组中，然后对它们进行排序

var y = 0;
var spans = $('#ulId li').map(function(){
   return $('span',this); // or $(this).find('span')
}).sort(function(){ return orderArr[y++]; });

然后，您可以循环并将它们附加到每个LI

$('#ulId li').each(function(i,v){
   $(v).append(spans[i]);
});

FIDDLE

或者，如果您想根据跨度对li进行排序，可以执行此操作

$('#ulId li').sort(function(a,b){
    var aa = $(a).find('span:first-child').text();
    var bb = $(b).find('span:first-child').text();
    return aa<bb ? -1 : aa>bb ? 1 : 0;
}).appendTo('#ulId');

FIDDLE

客户端内部排序＆lt;李＆GT;标签值

3 个答案: