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不是“更改”，而是“变更”）

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

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>

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

2 个答案: