Question

我有一个像这样的div元素

<div id="translist">
  <div class="transitem" id="1">
         <div class="transname"> Apple </div>
         <div class="transdate"> 04 Apr 2018 </div>
  </div>
  <div class="transitem" id="2">
         <div class="transname"> Banana </div>
         <div class="transdate"> 04 Apr 2018 </div>
  </div>
  <div class="transitem" id="3">
         <div class="transname"> Headshet </div>
         <div class="transdate"> 08 Apr 2018 </div>
  </div>
  <div class="transitem" id="4">
         <div class="transname"> Phone </div>
         <div class="transcat"> 04 Feb 2018 </div>
  </div>
  <div class="transitem" id="5">
         <div class="transname"> Pinaple </div>
         <div class="transcat"> 02 Jan 2018 </div>
  </div>
</div>

如何在transdate类上按日期对div进行排序如何使它像这样

Pinaple 02 Jan 2018
电话04 Feb 2018
Apple 04 Apr 2018
Banana 04 Apr 2018
Headshet 08 Apr 2018

Answer 1

我给所有日期为transdate类的div：

const container = document.querySelector("#translist");
Array.from(container.querySelectorAll(".transitem"))//trans items
.map(
  div=>[
    new Date(div.querySelector(".transdate").innerHTML.trim()).getTime(),//parse date
    div//the div containing the data item (transitem)
  ]
)
.sort(([a],[b])=>a-b)//sort by date
.forEach(
  ([x,div])=>container.appendChild(div)//append to container (will move it)
);

<div id="translist">
  <div class="transitem" id="1">
          <div class="transname"> Apple </div>
          <div class="transdate"> 04 Apr 2018 </div>
  </div>
  <div class="transitem" id="2">
          <div class="transname"> Banana </div>
          <div class="transdate"> 04 Apr 2018 </div>
  </div>
  <div class="transitem" id="3">
          <div class="transname"> Headshet </div>
          <div class="transdate"> 08 Apr 2018 </div>
  </div>
  <div class="transitem" id="4">
          <div class="transname"> Phone </div>
          <div class="transdate"> 04 Feb 2018 </div>
  </div>
  <div class="transitem" id="5">
          <div class="transname"> Pinaple </div>
          <div class="transdate"> 02 Jan 2018 </div>
  </div>
</div>

Answer 2

逻辑

从translist中提取数据（提取每个transitem的DOM节点和日期字符串）

var data = [];
document.querySelectorAll('#translist .transitem')
    .forEach((dom_node)=>{
        var date_string = dom_node.querySelector('.transcat').innerHTML;
        var data_object = { // create a data object
            "node" : dom_node, // store the dom node
            "date" : date_string, // store the date string
        }
        data.push(data_object); // add this data_object to the data array 
    })

我们存储了date_string，因此我们可以对元素进行排序
我们存储dom_node，以便我们可以操纵#translist元素中该元素的顺序

对列表进行排序

data.sort((a, b)=>{
     var a_date_int = new Date(a.date_string);
     var b_date_int = new Date(b.date_string);
     return a_date_int - b_date_int; // if a is older, it will have a lower index
 })

按顺序重新附加每个元素。 the elements will simply change order (not duplicated) since a node can not be in two places at once

var dom_parent = document.querySelector('#translist');
data.forEach((data_object)=>{
    var dom_node = data_object.dom_node;
    dom_parent.appendChild(dom_node);
})

一起

    var data = [];
    document.querySelectorAll('#translist .transitem')
        .forEach((dom_node)=>{
            var date_string = dom_node.querySelector('.transcat').innerHTML;
            var data_object = { // create a data object
                "node" : dom_node, // store the dom node
                "date" : date_string, // store the date string
            }
            data.push(data_object); // add this data_object to the data array 
        })

    data.sort((a, b)=>{
         var a_date_int = new Date(a.date_string);
         var b_date_int = new Date(b.date_string);
         return a_date_int - b_date_int; // if a is older, it will have a lower index
     })

    var dom_parent = document.querySelector('#translist');
    data.forEach((data_object)=>{
        var dom_node = data_object.dom_node;
        dom_parent.appendChild(dom_node);
    })

Answer 3

因为子节点没有相同的类名，所以提取数组中的元素，按日期对其进行排序，并使用之前的属性和值重新创建子节点，这样就不会丢失类（我添加了颜色到它们在片段中，然后将它们重新放入容器中：

// create a list of objects containing the children's values and sort it
const dates = [...document.querySelectorAll('.transitem')].map(e => {
  return {
    id: e.id,
    name: e.childNodes[1].innerHTML,
    date: e.childNodes[3].innerHTML,
    className: e.childNodes[3].classList[0]
  }
}).sort((a, b) => new Date(a.date) - new Date(b.date));

const transList = document.querySelector('#translist');

//empty the container
transList.innerHTML = '';

// loop throught the object list, recreate the children and append then
dates.forEach(e => {
  const div = document.createElement("div")
  div.id = e.id
  div.classList.add('transitem')

  let child = document.createElement("div")
  child.innerHTML = e.name
  child.classList.add('transname')

  div.appendChild(child)

  child = document.createElement("div")
  child.innerHTML = e.date
  child.classList.add(e.className)

  div.appendChild(child)

  transList.appendChild(div)
});

.transcat{
  color : green;
}

.transdate{
  color: blue;
}

<div id="translist">
  <div class="transitem" id="1">
         <div class="transname"> Apple </div>
         <div class="transdate"> 04 Apr 2018 </div>
  </div>
  <div class="transitem" id="2">
         <div class="transname"> Banana </div>
         <div class="transdate"> 04 Apr 2018 </div>
  </div>
  <div class="transitem" id="3">
         <div class="transname"> Headshet </div>
         <div class="transdate"> 08 Apr 2018 </div>
  </div>
  <div class="transitem" id="4">
         <div class="transname"> Phone </div>
         <div class="transcat"> 04 Feb 2018 </div>
  </div>
  <div class="transitem" id="5">
         <div class="transname"> Pinaple </div>
         <div class="transcat"> 02 Jan 2018 </div>
  </div>
</div>

按内容日期排序div

3 个答案:

逻辑

一起