按字母顺序排序项目

时间:2012-06-20 17:23:52

标签: javascript jquery javascript-events

我正在重新发布这个问题,因为我在第一次发布时犯了一个错误:在问之前我没有努力。我想向社区道歉,要求它为我做我的工作

我试图按字母顺序排序div中的无序列表。不是无序列表中的列表项,而是无序列表本身。

这就是HTML的样子:

<div class="FindByCategory">
    <ul>
         <li> B. This is the first list item in the second unordered list</li>
         <li> B. This is the second list item in the second unordered list</li>
    </ul>
    <ul>
         <li> A. This is the first list item in the first unordered list</li>
         <li> A. This is the second list item in the first unordered list</li>
    </ul>
</div>

我希望它看起来像这样:

<div class="FindByCategory">
    <ul>
         <li> A. This is the first list item in the first unordered list</li>
         <li> A. This is the second list item in the first unordered list</li>
    </ul>
    <ul>
         <li> B. This is the first list item in the second unordered list</li>
         <li> B. This is the second list item in the second unordered list</li>
    </ul>
</div>

这是我到目前为止所做的:

    <script>
        function sortUnorderedList(div.FindByCategory, sortDescending) {
  if(typeof div.FindByCategory == "string")
    div = document.getElementById(div.FindByCategory);
  var uls = ul.getElementsByTagName("UL");
  var vals = [];
  for(var i = 0, l = uls.length; i < l; i++)
    vals.push(uls[i].innerHTML);
  vals.sort();
  for(var i = 0, l = uls.length; i < l; i++)
    uls[i].innerHTML = vals[i];
}
$(function(){
    FindByCategory()
    }
    </script>

3 个答案:

答案 0 :(得分:1)

排序任何DOM节点时,有三个简单的步骤:

  1. 构建要排序的节点数组,并附上您要排序的部分(如果它不是易于访问的属性)。
  2. 对数组进行排序。
  3. 根据新订单重建DOM树。
  4. 在这种情况下,您要排序的节点由#FindByCategory > ul匹配,并且您实际上按其文本内容进行排序。所以:

    var qsa = document.querySelectorAll("#FindByCateory > ul"), l = qsa.length, i, arr = [];
    for( i=0; i<l; i++) {
        arr[i] = [qsa[i],qsa[i].textContent || qsa[i].innerText];
        // the text content is not readily accessible, since it depends on the browser
    }
    // now sort the array:
    arr.sort(function(a,b) {return a[1] < b[1] ? -1 : (a[1] == b[1] ? 0 : 1);});
    // and now re-append them
    for( i=0; i<l; i++) {
        arr[i][0].parentNode.appendChild(arr[i][0]);
        // by re-appending the nodes, they will emerge sorted
    }
    

答案 1 :(得分:1)

试试这个

<script type="text/javascript">

                var array = new Array();

                for(var i = 0 ; i<4 ; i++){

                    var string = $("li:eq("+i+")").text();
                    array[i]  = string;

                }

                array.sort();

                alert(array);


            </script>

答案 2 :(得分:0)

这是一个链接到jQuery的瑞士军刀分类插件。 http://tinysort.sjeiti.com/