排序<li>标签

Question

排序<li>标签

我有一个,我想根据一个名为"name"的类按字母顺序对我的列表进行排序(我不想要大写).我该怎么做？

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

Run Code Online (Sandbox Code Playgroud)

谢谢

Answer 1

Rex*_*x M 9

使用jQuery,这应该这样做:

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

Run Code Online (Sandbox Code Playgroud)

虽然上面有点密集,所以如果你想了解发生了什么,让我们逐行分解:

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

Run Code Online (Sandbox Code Playgroud)

我们可以通过传入列表的选择器和密钥使其更加可重用:

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

Run Code Online (Sandbox Code Playgroud)

请记住这需要jQuery,因此您需要在以下内容中引用它<head>:

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

Run Code Online (Sandbox Code Playgroud)

在HTML中编写列表后,应在页面中的某个位置调用此函数.

归档时间：	16 年，1 月前
查看次数：	8276 次
最近记录：	16 年，1 月前