使用jquery排序元素

sorting elements using jquery

本文关键字：元素 排序 jquery 使用      更新时间：2023-09-26

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

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

这是一个示例:html: 

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

js 

  $(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插件是合适的

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

我已经构建了一个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;
 }

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

它有很好的文档，即使对于大列表也有很好的性能，并且非常轻量级(7KB，尽管与库无关)。

相关文章：