如何对UL和LI DIV数据进行分类

Question

我想对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>

Answer 1

首先不使用页面上复制的相同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不是"更改"，而是" chnage"）

$("#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创建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);
};

Answer 2

您使用了较低的情况ID，ID名称是案例敏感的。我也看不到任何嵌套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);
  });
}

ul {
  display: flex;
  flex-direction: column;
}
li {
  display: flex;
}
li div {
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
  <li>
    <div id='title'>FB2</div>
    <div id='price'>200</div>
    <div id='net_change'>0.3 - 0.6%</div>
    <div id='Volume'>2800</div>
  </li>
  <li>
    <div id='title'>FB3</div>
    <div id='price'>200</div>
    <div id='net_change'>0.3 - 0.6%</div>
    <div id='Volume'>2800</div>
  </li>
</ul>