Question

我有一个a，我想根据名为“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>

由于

Answer 1

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

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

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

我们可以通过传入列表的选择器和密钥来使其更具可重用性：

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

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

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

在列表以HTML编写之后，应该在页面中的某个位置调用此函数。

Answer 2

我的答案更长：p但是工作。

function SortLIs() {
    var ColumnUL = $("ul.column");
    var Columns  = $(ColumnUL).children("li");
     
    var ColumnNames    = new Array();
    var Columns_byName = new Array();
    var Columns_Count  = Columns.length;
    for(var i = 0; i <  Columns_Count; i++) {
        var aColumn = Columns[i];
        var aTD     = $(aColumn).find(".name");
        var aTDName = aTD.text();
        ColumnNames.push(aTDName);
        Columns_byName[aTDName] = aColumn;

        $(aColumn).remove();
    }
     
    ColumnNames.sort(function(a, b){
        return (a >  b) - (a <  b);
    });
     
    for(var i = 0; i <  Columns_Count; i++) {
        var aName = ColumnNames[i];
        ColumnUL.append(Columns_byName[aName]);
    }
}

编辑：我看到你说你不擅长JS。所以这是你的大局。

（1）将以下代码添加到HTML的标题中。这将使用jQuery库。

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

（2）在上面的代码后面添加“sortLIs”代码

<script>
<!--
function SortILs() {
    ...
}
-->
</script>

（3.1）如果要在加载时开始排序。在上面的代码之后添加此权限。

<script>
<!--
$(document).ready(function(){
    SortILs();
});
-->
</script>

（3.2）否则，您从事件中调用该函数。

希望这有帮助。

Answer 3

这是另一种方法，从目前为止给出的其他答案中窃取想法（也需要jQuery）：

function sort(elementSelector, valueSelector, ascending) {
  var sign = ascending ? -1 : 1;
  var elements = jQuery(elementSelector);
  elements.each(function() {
    this.sortKey = jQuery(valueSelector, this).text();
  });
  var sorted = elements.get();
  sorted.sort(function(a, b) {
    var keyA = a.sortKey;
    var keyB = b.sortKey;
    return sign * ((keyA < keyB) - (keyA > keyB));
  });
  elements.parent().append(sorted);
}

sort('.column>li', '.name', true)

Answer 4

只需在上面附上jQuery响应，看一下本教程： http://www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/

对于语义，最好还将classname放在实际的<li>标记内。

除了在列表中使用表之外，您可能希望发布示例页面以进一步提供帮助。

排序<li>标签</li>

4 个答案: