排序< li>标签 [英] Sorting <li> tags

问题描述

我有一个a，我想根据名为name的类按字母顺序对我的列表进行排序（我不想大写）。我怎么做到这一点？

 < ul class =column> 
< li> 
< table> 
< tr> 
< td class =name>项目名称< / td> 
< / tr> 
< tr> 
< td>内容< / td> 
< / tr> 
< tr> 
< td> morecontent< / td> 
< td> morecontent< / td> 
< / tr> 
< / table> 
< / li> 
< li> 
< table> 
< tr> 
< td class =name>项目的另一个名称< / td> 
< / tr> 
< tr> 
< td>内容< / td> 
< / tr> 
< tr> 
< td> morecontent< / td> 
< td> morecontent< / td> 
< / tr> 
< / table> 
< / li> 
< / ul> 
  

谢谢

解决方案使用jQuery，应该这样做：

 函数sort（）{
 $（$（ 'ul.column> li'）。get（）。reverse（））。each（function（outer）{
 var sorting = this; 
 $（$（'ul.column> li'） .get（）。reverse（））。each（function（inner）{
 if（$（'td.name'，this）.text（）。localeCompare（$（'td.name'，sorting） .text（））> 0）{
 this.parentNode.insertBefore（sorting.parentNode.removeChild（sorting），this）; 
} 
}）; 
}） ; 
 
 $ / code> 

虽然上面有点浓，但如果你想知道会发生什么我们来逐行分解它：



 函数sort（）{
 
 / /获取每个< li>它是< ul class =column>的子项。 
 //对于结果中的每个元素，执行一个函数
 //我们也颠倒了顺序（例如从底部开始并上升到
 $（$（'ul.column> （）{
 
 //这是我们正在运行的当前< li> 
 var sorting = this; 
 
 //在当前状态下再次获取相同的元素集合
 //所以我们可以计算出这个元素的位置
 $（$（'ul .column> li'）。get（）。reverse（））。each（function（inner）{
 
 //获取< td class =name的内部文本> 
 //用于我们要替换的项目，
 //以及内部循环中的当前项目
 //使用localeCompare按字母顺序比较两个字符串
 if（ $（'td.name'，this）.text（）。localeCompare（$（'td.name'，sorting）.text（））> 0）{
 
 //如果一个我们正在尝试分类e当前一个
 //按字母顺序排列，将其从当前位置删除
 //并将其插入当前位置
 this.parentNode.insertBefore（sorting.parentNode.removeChild（sorting）），this ）; 
} 
}）; 
}）; 
 
 $ / code> 

我们可以通过传入列表的选择器来使它更加可重用和关键字：

  sort（'ul.column> li'，'td.name'）; 
 
函数sort（list，key）{
 $（$（list）.get（）。reverse（））。each（function（outer）{
 var sorting =这个; 
 $（$（list）.get（）。reverse（））。each（function（inner）{
 if（$（key，this）.text（）。localeCompare（$按钮，排序）.text（））> 0）{
 this.parentNode.insertBefore（sorting.parentNode.removeChild（sorting），this）; 
} 
}）; 
}）; 
} 
  

请记住这需要jQuery，所以您需要引用它在< head> 中：

 < script src = http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></script> 
  

这个函数应该在 后面的列表是用HTML编写的。

I have a a and I would like to sort my list alphabetically (I don't want caps to matter) according to a class named "name". How would I do this?

<ul class="column">
  <li>
    <table>
      <tr>
        <td class="name" >Name of Item</td>
      </tr>
      <tr>
        <td>Content</td>
      </tr>
      <tr>
        <td>morecontent</td>
        <td>morecontent</td>
      </tr>
    </table>
  </li>
  <li>
    <table>
      <tr>
        <td class="name" >Another name of item</td>
      </tr>
      <tr>
        <td>Content</td>
      </tr>
      <tr>
        <td>morecontent</td>
        <td>morecontent</td>
      </tr>
    </table>
  </li>
</ul>

Thanks

解决方案

Using jQuery, this should do it:

function sort() {
    $($('ul.column>li').get().reverse()).each(function(outer) {
        var sorting = this;
        $($('ul.column>li').get().reverse()).each(function(inner) {
            if($('td.name', this).text().localeCompare($('td.name', sorting).text()) > 0) {
                this.parentNode.insertBefore(sorting.parentNode.removeChild(sorting), this);
            }
        });
    });
}

The above is a little dense though, so if you want to understand what's going on, let's break it down line-by-line:

function sort() {

    //get each <li> which is a child of <ul class="column">
    //for each element in the results, execute a function
    //also, we reversed the order (e.g. start at the bottom and go up
    $($('ul.column>li').get().reverse()).each(function(outer) {

        //this is the current <li> we're running against
        var sorting = this;

        //get the same set of elements again in their current state,
        //so we can figure out where to put this one
        $($('ul.column>li').get().reverse()).each(function(inner) {

            //get the inner text of the <td class="name">
            //for the item we're trying to replace,
            //and for the current item in the inner loop
            //use localeCompare to compare the two strings alphabetically
            if($('td.name', this).text().localeCompare($('td.name', sorting).text()) > 0) {

                //if the one we're trying to sort goes after the current one
                //alphabetically, remove it from its current position
                //and insert it after the current one
                this.parentNode.insertBefore(sorting.parentNode.removeChild(sorting), this);
            }
        });
    });
}

We can make it a little more reusable by passing in the selector for the list and the key:

sort('ul.column>li', 'td.name');

function sort(list, key) {
    $($(list).get().reverse()).each(function(outer) {
        var sorting = this;
        $($(list).get().reverse()).each(function(inner) {
            if($(key, this).text().localeCompare($(key, sorting).text()) > 0) {
                this.parentNode.insertBefore(sorting.parentNode.removeChild(sorting), this);
            }
        });
    });
}

Do keep in mind this requires jQuery, so you'll need a reference to it in your <head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

And this function should be called at some point in the page after the list is written in the HTML.

这篇关于排序< li>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！