sort item in jquery or javascript

Question

strong text

I have a box in a few boxes and placed inside each box for an hour. I want to sort by using the box clock named item. This sorting has three modes, the first ascending, the second descending, the third without sorting.

strong text

<body>

<style>
body{margin: 0 auto;padding: 0 auto;background: skyblue;}	
.full-item{width: 800px;height: 600px;margin: 50px auto;background: grey;}
.full-item .button-item{width: 100%;height: 80px;background: #B33771;}
.full-item .button-item button{margin: 30px 45%;}
.full-item .item-sort{width: 100%;height: 500px;background: white;margin-top: 10px;}
.full-item .item-sort:first-child{margin-top: 10px;}
.full-item .item-sort .item{width: 90%;height: 140px;background: red;margin: 10px auto;}
.item-sort .item .pic{width: 30%;height: 100%;background: #3B3B98;float: left;}
.item-sort .item .time{width: 70%;height: 100%;background: #1B9CFC;float: right;}
.item-sort .item .time span{color: white;text-align: center;display: block;line-height: 100px;}
</style>
<div class="full-item">
	<div class="button-item">
		<button id="Sort-item">Sort by</button>
	</div>
	<div class="item-sort">
		<div class="item">
			<div class="pic"></div>
			<div class="time"><span>15:20</span></div>
		</div>
		<div class="item">
			<div class="pic"></div>
			<div class="time"><span>13:10</span></div>
		</div>
		<div class="item">
			<div class="pic"></div>
			<div class="time"><span>18:40</span></div>
		</div>
	</div>
</div>

</body>

Instead of directly creating html and then sorting, you can have an array first and then on sorting type change, sort and render — akbansa
– akbansa, Commented Jan 1, 2019 at 9:29

vol7ron · Accepted Answer · 2019-01-01 17:48:13Z

If the data is coming from JSON or other source, as with akbansa's recommendation, you should perform the sorting on the data first; otherwise, see below for an example of how you could reorder your elements:

const button = document.querySelector('#Sort-item')

// add handler
button.addEventListener('click', clickHandler)

// handler definition
function clickHandler(){
  let container = document.querySelector('.item-sort')
  let items = Array.from(container.querySelectorAll('.item-sort .item'))
  
  // sort based on time
  items = items.sort((a,b)=>{
    let a_time = a.querySelector('.time span').textContent
    let b_time = b.querySelector('.time span').textContent
    return a_time > b_time ? 1 : -1
  })
  
  // apply the order
  for(let item of items)
    container.appendChild(item)
}

body {
  margin: 0 auto;
  padding: 0 auto;
  background: skyblue;
}

.full-item {
  width: 800px;
  height: 600px;
  margin: 50px auto;
  background: grey;
}

.full-item .button-item {
  width: 100%;
  height: 80px;
  background: #B33771;
}

.full-item .button-item button {
  margin: 30px 45%;
}

.full-item .item-sort {
  width: 100%;
  height: 500px;
  background: white;
  margin-top: 10px;
}

.full-item .item-sort:first-child {
  margin-top: 10px;
}

.full-item .item-sort .item {
  width: 90%;
  height: 140px;
  background: red;
  margin: 10px auto;
}

.item-sort .item .pic {
  width: 30%;
  height: 100%;
  background: #3B3B98;
  float: left;
}

.item-sort .item .time {
  width: 70%;
  height: 100%;
  background: #1B9CFC;
  float: right;
}

.item-sort .item .time span {
  color: white;
  text-align: center;
  display: block;
  line-height: 100px;
}

<div class="full-item">
  <div class="button-item">
    <button id="Sort-item">Sort by</button>
  </div>
  <div class="item-sort">
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>15:20</span></div>
    </div>
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>13:10</span></div>
    </div>
    <div class="item">
      <div class="pic"></div>
      <div class="time"><span>18:40</span></div>
    </div>
  </div>
</div>

Sahil Raj Thapa · Accepted Answer · 2019-01-05 14:49:55Z

1

Update your html inside "button-item" class

<div class="button-item">
    <p>Sort By </p>
    <button id="sort-asc" onclick="app.sortAsc()">Asc</button>
    <button id="sort-desc" onclick="app.sortDesc()">Desc</button>
    <button id="reset" onclick="app.reset()">Reset</button>
</div>

Add to your scripts

var app = (function (){      
        var originalArr = []
        var timeArr = []
        var sortedArr = []
        var objArr = []

        var timeElements = document.querySelectorAll('.time')
        var itemSortElement = document.querySelector('.item-sort')

        for ( let timeEl of timeElements) {
            //  retrieving text from individual span element
            let timeText = timeEl.children[0].innerText;
            // retrieving parent node of div with class "time" 
            let timeParent = timeEl.parentNode
            let obj = { text: timeText, parent: timeParent }
            objArr.push(obj)        
            timeArr.push(timeText)      
        }

       // copying all elements/ texts from "timeArr" array to "originalArr" array 
       // to keep track of original order of texts 
       originalArr = timeArr.slice()

        function sortAsc () {
            // sorting the retrieved texts in ascending order
            sortedArr = timeArr.sort();         
            while (itemSortElement.hasChildNodes()) {   
              // removing all child elements of class "item-sort"
              itemSortElement.removeChild(itemSortElement.firstChild);
            }           
            for ( let i = 0; i < sortedArr.length; i++) {
                let filteredObj = objArr.filter((obj) => sortedArr[i] == obj.text)[0]
                let node = filteredObj.parent
                itemSortElement.appendChild(node)
            }
        }

        function sortDesc () {
            sortedArr = timeArr.sort().reverse();               
            while (itemSortElement.hasChildNodes()) {   
              itemSortElement.removeChild(itemSortElement.firstChild);
            }               
            for ( let i = 0; i < sortedArr.length; i++) {
                var filteredObj = objArr.filter((obj) => sortedArr[i] == obj.text)[0]   
                let node = filteredObj.parent
                itemSortElement.appendChild(node)
            }
        }


        function reset () {
          while (itemSortElement.hasChildNodes()) {   
              itemSortElement.removeChild(itemSortElement.firstChild);
            }               
            for ( let i = 0; i < originalArr.length; i++) {

                var filteredObj = objArr.filter((obj) => originalArr[i] == obj.text)[0] 
                let node = filteredObj.parent
                itemSortElement.appendChild(node)
            }
        }

         return {
            sortDesc,
            sortAsc,
            reset
         }

        })()

you can check it Demo

edited Jan 5, 2019 at 14:49

answered Jan 1, 2019 at 9:11

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

4 Comments

saeed moradi Over a year ago

i want sort by through array. let FlyList = [{ "time": "15:20", }, { "time": "15:10", }, { "time": "18:40", }, { "time": "23:40", } ];

Sahil Raj Thapa Over a year ago

ok you did not mention that on the question. Are you still having issue in this question?

saeed moradi Over a year ago

stackoverflow.com/questions/54376987/…

saeed moradi Over a year ago

This is a new question.

Collectives™ on Stack Overflow

sort item in jquery or javascript

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related