Question

对此列表进行排序的最佳方法是什么

<ul id="keywords_list" class="list-unstyled list-filter list-filter-singleline">
    <li class="keyword_row" id=0>
        <input class="key_checkbox" id="0" name="keywords[]" type="checkbox" value="25"><a href="#" class="key_link" id="25"><span class="label label-default transition"><span class="keyword" id="0">8</span></span><i class="icn icn-checkmark"></i>Dogs</a>
    </li>
    <li class="keyword_row" id=1>
        <input class="key_checkbox" id="1" name="keywords[]" type="checkbox" value="16"><a href="#" class="key_link" id="16"><span class="label label-default transition"><span class="keyword" id="1">5</span></span><i class="icn icn-checkmark"></i>Cats</a>
    </li>
    <li class="keyword_row" id=2>
        <input class="key_checkbox" id="2" name="keywords[]" type="checkbox" value="3"><a href="#" class="key_link" id="3"><span class="label label-default transition"><span class="keyword" id="2">5</span></span><i class="icn icn-checkmark"></i>Birds</a>
    </li>
</ul>

输出应该是这样的：

<ul id="keywords_list" class="list-unstyled list-filter list-filter-singleline">
    <li class="keyword_row" id=2>
        <input class="key_checkbox" id="2" name="keywords[]" type="checkbox" value="3"><a href="#" class="key_link" id="3"><span class="label label-default transition"><span class="keyword" id="2">5</span></span><i class="icn icn-checkmark"></i>Birds</a>
    </li>
    <li class="keyword_row" id=1>
        <input class="key_checkbox" id="1" name="keywords[]" type="checkbox" value="16"><a href="#" class="key_link" id="16"><span class="label label-default transition"><span class="keyword" id="1">5</span></span><i class="icn icn-checkmark"></i>Cats</a>
    </li>                                             
    <li class="keyword_row" id=0>
        <input class="key_checkbox" id="0" name="keywords[]" type="checkbox" value="25"><a href="#" class="key_link" id="25"><span class="label label-default transition"><span class="keyword" id="0">8</span></span><i class="icn icn-checkmark"></i>Dogs</a>
    </li>
</ul>

我在StackOverflow上尝试了一些例子，但它们没有用。

Answer 1

您可以通过获取li's文本来使用JQUERY进行排序。

来源：http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

它利用javascript array.sort方法对元素进行排序然后使用jQuery append（）方法对数组进行重新排序实际的列表元素。

$("#sort").click(function() {
  var mylist = $('#keywords_list');
  var listitems = mylist.children('li').get();
  listitems.sort(function(a, b) {
    var compA = $(a).text().toUpperCase();
    var compB = $(b).text().toUpperCase();
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
  })
  $.each(listitems, function(idx, itm) {
    mylist.append(itm);
  });
});

<强> JSFIDDLE DEMO

排序html列表升序

1 个答案: