sorting div by Content Date

Question

i have a div element like this

<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>

How to sort the div by Date on transdate class how to make it like this

Pinaple 02 Jan 2018
Phone 04 Feb 2018
Apple 04 Apr 2018
Banana 04 Apr 2018
Headshet 08 Apr 2018

I do not use any libraries, I want to create it with a .sort function on javascript — Avista Kautsar, Apr 24 '18 at 02:41

score 1 · Answer 1 · answered Apr 24 '18 at 02:40

I gave all the divs with dates a transdate class:

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>

score 0 · Answer 2 · answered Apr 24 '18 at 02:41

logic

extract data from translist (extract the DOM node of each transitem and the date string)

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 
    })

We store the date_string so we can sort the elements
We store the dom_node so we can manipulate the order of that element in the #translist element

sort the list

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
 })

re-append each element, in order of sorting. 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);
})

all together

    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);
    })

Taki · Answer 3 · 2018-04-24T02:53:54.333

since the children doesn't have the same class names, extract the elements in an array, sort it by date and recreate the child nodes with their previous attributes and values so you don't loose the classes ( i added colors to them in the snippet ), then reappend them to the container :

// 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>

sorting div by Content Date

3 Answers3

logic

all together