gpt4 book ai didi

javascript - 在 jquery 或 javascript 中排序项目

转载 作者:行者123 更新时间:2023-11-30 14:13:24 35 4
gpt4 key购买 nike

强文本

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

强文本

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

最佳答案

如果数据来自 JSON 或其他来源,按照 akbansa 的建议,您应该首先对数据进行排序;否则,请参阅下面的示例,了解如何重新排列元素:

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>

关于javascript - 在 jquery 或 javascript 中排序项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53984898/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com