1

我有一个这样的 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

但是我需要根据第一个跨度值对结果进行排序，剩下的“<li>”应该是一样的。表示单击“按按钮排序”的结果应如下所示。

 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());
});
4

3 回答 3

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;    
}

链接到 jsFiddle

于 2013-07-11T15:31:33.097 回答
0

这是在 jQuery 中订购 <UL>/<OL> 的最简单方法是什么？：

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/

于 2013-07-11T15:30:22.953 回答
0

如果您想将LI's 保持在他们的位置并且只对跨度进行排序，您可以这样做

首先存储排序顺序

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);
});

然后你想从 each 中获取跨度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]);
});

小提琴

或者，如果您想根据跨度对 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');

小提琴

于 2013-07-11T15:48:53.913 回答