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

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

フィドル

または、スパンに基づいて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 に答える
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 に答える