Javascript 分类<；李>；标签

我有一个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>

项目名称
内容
莫雷内特
莫雷内特


项目的另一个名称
内容
莫雷内特
莫雷内特

---

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

请记住，这需要jQuery，因此您需要在

中引用它：

---

这个函数应该在列表以HTML格式写入后在页面中的某个点调用。

我的答案更长：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]);
    }
}

（3.1）如果您希望在装载时开始分拣。在上面的代码后面添加这个。

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

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

（3.2）否则，从事件调用函数

---

希望这能有所帮助。

只是附议上面的jQuery响应，看看本教程：

对于语义，最好将类名放在实际的

标记中

---

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

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

函数排序（元素选择器、值选择器、升序）{
var符号=上升？-1:1；
var elements=jQuery（elementSelector）；
元素。每个（函数（）{
this.sortKey=jQuery（valueSelector，this）.text（）；
});
var sorted=elements.get（）；
sorted.sort（函数（a，b）{
var-keyA=a.sortKey；
var-keyB=b.sortKey；
返回符号*（（keyAkeyB））；
});
elements.parent（）.append（已排序）；
}
排序（'.column>li'，'.name'，true）

嗯。这是客户端脚本问题还是服务器端脚本问题？你是怎么分类的？如果是客户端，在什么事件上？如果是服务器端，它们是如何生成的？请提供更多信息，就像梅德尔说的。我应该提供更多的信息。如果已生成，请先对其进行排序。另一方面，最简单的方法是使用jQuery对其进行排序。它不是生成的。我的页面中有所有的表，我想使用javascript获取name类中的文本并从中排序。但是我对javascript不在行。好吧，这是昨天刚问到的（html结构略有不同）。被接受的答案是甜蜜的，请检查：如果列表中有嵌套列表要排序，那么这将不起作用。你是对的。我已经习惯了使用“find”，我会把它改成children。谢谢你指出这一点。谢谢，我已经在使用JQuery，所以这将很容易添加。：）你的解决方案非常灵活。

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

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

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

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)