由于Wordpress插件的限制,我正在尝试按特定顺序对样式化的下拉列表进行排序。有没有一种方法可以使用jQuery定位这些div并按以下顺序对其进行排序?
我有以下标记:
<div class="manager">
<div class="dd__list dd__openTobottom" style="max-height: 160px;">
<div>
<div class="dd__option">Souness</div>
</div>
<div>
<div class="dd__option">Smith</div>
</div>
<div>
<div class="dd__option">Advocaat</div>
</div>
<div>
<div class="dd__option">McLeish</div>
</div>
</div>
</div>
我想按预定顺序将其排序,如下所示:
史密斯
Advocaat
苏内斯
麦克里什
我赞赏此操作应该更早完成,最好是通过PHP或类似方法完成,但是我的双手与我正在使用的插件捆绑在一起。
最佳答案
如果您无法更改HTML,请使用CSS
.dd__list{
display: flex;
flex-direction:column;
}
.dd__list div:nth-child(1):not(.dd__option){
color:red;
order: 3;
}
.dd__list div:nth-child(2):not(.dd__option){
color:green;
order: 1;
}
.dd__list div:nth-child(3):not(.dd__option){
color:orange;
order: 2;
}
.dd__list div:nth-child(4):not(.dd__option){
color:olive;
order: 4;
}
<div class="manager">
<div class="dd__list dd__openTobottom" style="max-height: 160px;">
<div>
<div class="dd__option">Souness</div>
</div>
<div>
<div class="dd__option">Smith</div>
</div>
<div>
<div class="dd__option">Advocaat</div>
</div>
<div>
<div class="dd__option">McLeish</div>
</div>
</div>
</div>
:not()
由于所有容器都是div
,所以不能只使用:nth-child
关于javascript - 使用jQuery根据其文本内容按特定顺序对div重新排序,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46035407/