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

10-12 02:40
查看更多