时间戳

首页 > 解决方案 > 在 jquery 或 javascript 中排序项目

javascript - 在 jquery 或 javascript 中排序项目

问题描述

强文本

我在几个盒子里放了一个盒子，每个盒子里放了一个小时。我想使用名为 item 的盒子时钟进行排序。这种排序有三种模式，第一种升序，第二种降序，第三种不排序。

强文本

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

标签： javascriptjquery

解决方案

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>

推荐阅读