时间戳

首页 > 解决方案 > 如何对 Ul 和 Li div 数据进行排序

javascript - 如何对 Ul 和 Li div 数据进行排序

问题描述

我想在 jquery 中对<ul>和数据进行排序。<li>

这是我的示例代码

<ul id="rootUl">
  <li>
      <div id='title'>MSFT</div>
      <div id='price'>230</div>
      <div id='net_change'>0.2 - 0.4%</div>
      <div id='Volume'>3000</div>
  <li>

  <li>
      <div id='title'>FB</div>
      <div id='price'>200</div>
      <div id='net_change'>0.3 - 0.6%</div>
      <div id='Volume'>2800</div>
  <li>
</ul>

我试过这样：

$( "#title" ).click(function() {
  var items = $('#rootul > li').get();
  console.log( items );
  var nestedItems = $('#rootul > li > ul > li').get(); 
  items = sort(items);      
  adjustItems('#rootul', items);
  nestedItems = sort(nestedItems);
  adjustItems('#rootul > li > ul', nestedItems); 
});

function sort(items) {
  items.sort(function(a,b){
    var keyA = $(a).text();
    var keyB = $(b).text();

    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
  });       
  return items;
}

function adjustItems(sel, items) {
  var ul = $(sel);
  $.each(items, function(i, li){
    ul.append(li);
  });
}

如果我单击按标题排序的按钮，第二个 li 将更改为第一个升序

<button id='title'>Sort By Title </button> 
<button id='price'>Sort By price</button> 
<button id='chnage'>Sort By net change</button>

标签： javascriptjquerysorting

解决方案

首先不要使用在页面上重复的相同 id，使用类。

<div id=tableToSort">
     <ul id="rootUl">
      <li>
          <div class='title'>MSFT</div>
          <div class='price'>230</div>
          <div class='change'>0.2 - 0.4%</div>
          <div class='volume'>3000</div>
      </li>

       <li>
          <div class='title'>FB</div>
          <div class='price'>200</div>
          <div class='change'>0.3 - 0.6%</div>
          <div class='volume'>2800</div>
      </li>
     </ul>
</div>

之后，如果您使用；

var myArr=new Array();
var allList=$("#rootUl li");
for(var x=0;x<allList.length;x++){
    var newRow=allList[x];
    var newObj={
        "title":$(newRow).find(".title").text(),
        "price":parseFloat($(newRow).find(".price").text()),
        "net_change":parseFloat($(newRow).find(".change").text()),
        "Volume":parseFloat($(newRow).find(".volume").text())
    };
    myArr.push(newObj);
}

现在您获取了 myArr 数组上的所有值。毕竟，您可以使用这些函数对数组进行排序；

function sortByKeyDesc(array, key) {
    return array.sort(function (a, b) {
        var x = a[key]; var y = b[key];
        return ((x > y) ? -1 : ((x < y) ? 1 : 0));
    });
}
function sortByKeyAsc(array, key) {
    return array.sort(function (a, b) {
        var x = a[key]; var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
}

例子; （请注意您的按钮 ID 不是“更改”而是“更改”）

$("#price").on("click",function(){
    myArr=sortByKeyAsc(myArr,"price");
});
$("#volume").on("click",function(){
    myArr=sortByKeyAsc(myArr,"volume");
});
$("#change").on("click",function(){
    myArr=sortByKeyAsc(myArr,"change");
});

然后您可以使用 jquery create doms 打印您的新数组，例如；

var createNewTable=function(){
var myDom=$("<ul>",{"id":"rootUl"});

for(var x=0;x<myArr.length;x++){

    var obj=myArr[x];

    var myTitle=$("<li>",{
        "class":"title",
        "text":obj.title
    });
    var myPrice=$("<li>",{
        "class":"price",
        "text":obj.price
    });
    var myChange=$("<li>",{
        "class":"net_change",
        "text":obj.change
    });
    var myVolume=$("<li>",{
        "class":"Volume",
        "text":obj.volume
    });
        myDom.append(
            myTitle,
            myPrice,
            myChange,
            myVolume
        );
    }

    $("#tableToSort").html(myDom);
};

推荐阅读