使用jquery对元素进行排序答案

【问题标题】：sorting elements using jquery使用jquery对元素进行排序
【发布时间】：2011-11-22 15:31:52
【问题描述】：

我有一个 div，#containerDiv，它在单独的 div 中包含与用户相关的元素，例如名字、姓氏等。我需要根据姓氏、名字等值对容器div 的内容进行排序。

在搜索谷歌时，我得到的所有示例都是附加排序结果，而不是更改正在显示的整个 HTML。它们也不按特定字段（名字、姓氏）排序。

所以请帮助我根据特定字段对#containerDiv的全部内容进行排序并显示它。

页面看起来如下所述：

<div id="containerDiv">
    <div id="lName_1">dsaf</div><div id="fName_1">grad</div>
    <div id="lName_2">sdaf</div><div id="fName_2">radg</div>
    <div id="lName_3">asdf</div><div id="fName_3">drag</div>
    <div id="lName_4">fasd</div><div id="fName_4">gard</div>
    <div id="lName_5">dasf</div><div id="fName_5">grda</div>
    <div id="lName_6">asfd</div><div id="fName_6">drga</div>
</div>

按姓氏 div 值排序后，容器 div 的结果结构应如下所示：

<div id="containerDiv">
    <div id="lName_3">asdf</div><div id="fName_3">drag</div>
    <div id="lName_6">asfd</div><div id="fName_6">drga</div>
    <div id="lName_5">dasf</div><div id="fName_5">grda</div>
    <div id="lName_1">dsaf</div><div id="fName_1">grad</div>
    <div id="lName_4">fasd</div><div id="fName_4">gard</div>
    <div id="lName_2">sdaf</div><div id="fName_2">radg</div>
</div>

现在我认为你们都可以以更好的方式帮助我。

【问题讨论】：

可能重复：stackoverflow.com/questions/552888/…
你的 html 是什么样的？我们可以看看你尝试了什么（排序明智）。这个问题非常模糊......您的 div 是分成“行”还是只是浮动......如果这是类似网格的数据，那么表格是否更适合......
我假设 HTML 是由某种 CMS/数据库生成的，而不是静态的？在这种情况下，我建议修改为您提供数据的代码中的顺序。

标签： javascript jquery

【解决方案1】：

这是一个示例： html:

<div id="containerDiv">
    <div>2</div>
    <div>3</div>
    <div>1</div>
</div>

  $(function() {
    var container, divs;
    divs = $("#containerDiv>div").clone();
    container = $("#containerDiv");
    divs.sort(function(divX, divY) {
      return divX.innerHTML > divY.innerHTML;
    });
    container.empty();
    divs.appendTo(container);
  });

您可以根据您的目标设置divs.sort 函数参数。

jsFiddle.

jQuery Plugin 是合适的

【讨论】：

【解决方案2】：

我建议您阅读 div 值，以便获取对象数组（例如人）或仅名称并对其执行排序操作。比...将结果输出到初始 div（覆盖默认值）。

【讨论】：

【解决方案3】：

我已经构建了一个 jQuery 排序函数，您可以在其中影响排序字段。

（它通过将行移动到另一个位置来重建 html）。

function sortTableJquery()
 {
    var tbl =$("#tbl tr");
    var store = [];
    var sortElementIndex = parseFloat($.data(document.body, "sortElement"));

    for (var i = 0, len = $(tbl).length; i < len; i++)
    {
        var rowDom = $(tbl).eq(i);
        var rowData = $.trim($("td",$(rowDom)).eq(sortElementIndex).text());
          store.push([rowData, rowDom]);
    }
    store.sort(function (x, y)
    {
        if (x[0].toLowerCase() == y[0].toLowerCase()) return 0;
        if (x[0].toLowerCase() < y[0].toLowerCase()) return -1 * parseFloat($.data(document.body, "sortDir"));
        else return 1 * parseFloat($.data(document.body, "sortDir"));

    });
    for (var i = 0, len = store.length; i < len; i++)
    {
        $("#tbl").append(store[i][1]);
    }
    store = null;
 }

【讨论】：

【解决方案4】：

每次我需要对列表进行排序时，我都会使用ListJs。

它有据可查，即使对于大型列表也具有良好的性能，并且非常轻量级（7KB，尽管与库无关）。

【讨论】：