javascript - 使用 jQuery 根据文本内容按特定顺序对 div 重新排序

Question

由于我正在使用的 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>

我想按照预先确定的顺序对其进行排序，如下所示:

1. 史密斯
2. 倡导者
3. 索内斯
4. 麦克利什

我很高兴这应该早点完成，最好是通过 PHP 或类似的方式完成，但我的手被我正在使用的插件束缚了。

Answer 1

如果你无法更改 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