Javascript 使用jQuery根据div的文本内容按特定顺序对其重新排序

由于我使用的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或类似的方式完成，但我的双手被我正在使用的插件束缚住了。

你说这是预先确定的，所以我会尝试以下方法：

var arr = [ 'Smith', 'Advocaat', 'Souness', 'McLeish'];
$('.dd__openTobottom').html()
$.each( arr, function( index, value ){
    $('.dd__openTobottom').append('<div><div class="dd_option">'+value+'</div></div>')
});

var arr=['Smith'，'Advocaat'，'Souness'，'McLeish']；
$（'.dd_uopentobottom'）.html（）
$。每个（arr，函数（索引，值）{
$（'.dd_uuopentobottom'）。追加（''+value+''）
});

---

注意：在本例中，下拉列表是由一个普通类选择的，可能会影响其他下拉列表，您应该为此找到一个唯一的选择器，如果您说它是预先确定的，那么我将尝试以下方法：

var arr = [ 'Smith', 'Advocaat', 'Souness', 'McLeish'];
$('.dd__openTobottom').html()
$.each( arr, function( index, value ){
    $('.dd__openTobottom').append('<div><div class="dd_option">'+value+'</div></div>')
});

var arr=['Smith'，'Advocaat'，'Souness'，'McLeish']；
$（'.dd_uopentobottom'）.html（）
$。每个（arr，函数（索引，值）{
$（'.dd_uuopentobottom'）。追加（''+value+''）
});

注意：在本例中，下拉列表由常规类选择，可能会影响其他下拉列表，您应该为此找到唯一的选择器尝试以下操作：

$(document).ready(function() {
  var arr = ['Smith', 'Advocaat', 'Souness', 'McLeish'];
  $('.dd__openTobottom').html("");
  $.each(arr, function(index, value) {
    $('.dd__openTobottom').append('<div><div class="dd_option">' + value + '</div>')
  });
});

$（文档）.ready（函数（）{
var arr=['Smith'，'Advocaat'，'Souness'，'McLeish']；
$（'.dd_uopentobottom'）.html（“”）；
$。每个（arr，函数（索引，值）{
$（'.dd_uuopentobottom'）。追加（''+value+''）
});
});

演示：

首先获取名称数组。清空下拉列表。迭代列表并将新元素附加到下拉列表中

尝试以下操作：

$(document).ready(function() {
  var arr = ['Smith', 'Advocaat', 'Souness', 'McLeish'];
  $('.dd__openTobottom').html("");
  $.each(arr, function(index, value) {
    $('.dd__openTobottom').append('<div><div class="dd_option">' + value + '</div>')
  });
});

$（文档）.ready（函数（）{
var arr=['Smith'，'Advocaat'，'Souness'，'McLeish']；
$（'.dd_uopentobottom'）.html（“”）；
$。每个（arr，函数（索引，值）{
$（'.dd_uuopentobottom'）。追加（''+value+''）
});
});

演示：

---

首先获取名称数组。清空下拉列表。迭代列表并将新元素添加到下拉列表中

您可以尝试使用css顺序： 浏览器支持以下信息：

---

您可以尝试使用css顺序： 浏览器支持以下信息：

---

您可以保留一个预定顺序的映射，然后只需按包含的文本对项目进行排序，然后按该顺序重新插入DOM

这将保留关联的事件和数据，而不是简单地用新的HTML替换元素

var-map=['Smith'，'Advocaat'，'Souness'，'McLeish']；
$（'.dd\u list>div'）.sort（函数（a，b）{
var aText=$（a.text（）.trim（）；
var bText=$（b.text（）.trim（）；
返回map.indexOf（aText）-map.indexOf（bText）；
}).appendTo（“.dd\u列表”）

索内斯
史密斯
蛋黄白兰地
麦克利什

您可以保留一个预定顺序的映射，然后只需按包含的文本对项目进行排序，然后按该顺序重新插入DOM

这将保留关联的事件和数据，而不是简单地用新的HTML替换元素

var-map=['Smith'，'Advocaat'，'Souness'，'McLeish']；
$（'.dd\u list>div'）.sort（函数（a，b）{
var aText=$（a.text（）.trim（）；
var bText=$（b.text（）.trim（）；
返回map.indexOf（aText）-map.indexOf（bText）；
}).appendTo（“.dd\u列表”）

索内斯
史密斯
蛋黄白兰地
麦克利什

一种简单但“脏”的方法是清空容器并重新生成结果。 我称之为dirty，因为您需要知道生成元素的结构和che类/id。下面的答案仅适用于该特定用例，但如果需要，可以对其进行扩展

var ordered = ["Smith", "Advocaat", "Souness", "McLeish"];

var parent = $("#listParent").empty();

for(var i=0; i<ordered.length; ++i) {
    var cont = $(document.createElement("div")).appendTo(parent);
  $(document.createElement("div")).addClass("dd_option").text(ordered[i]).appendTo(cont);
}

var ordered=[“Smith”、“Advocaat”、“Souness”、“McLeish”]；
var parent=$（“#listParent”）.empty（）；
对于（var i=0；i一个简单但“脏”的方法是清空容器并重新生成结果。
我称之为dirty是因为您需要知道生成元素的结构和che类/id

var ordered = ["Smith", "Advocaat", "Souness", "McLeish"];

var parent = $("#listParent").empty();

for(var i=0; i<ordered.length; ++i) {
    var cont = $(document.createElement("div")).appendTo(parent);
  $(document.createElement("div")).addClass("dd_option").text(ordered[i]).appendTo(cont);
}

var ordered=[“Smith”、“Advocaat”、“Souness”、“McLeish”]；
var parent=$（“#listParent”）.empty（）；
对于（var i=0；i
使用此代码。
$（'.manager'）。每个（函数（）{
var$this=$（this）；
$this.append（$this.find（'.dd\u option'）.get（）.sort（函数（a，b）{
返回$（a）.data（'index'）-$（b）.data（'index'）；
}));
});
HTML:
索内斯
史密斯
蛋黄白兰地
麦克利什


感谢您的帮助。
请使用此代码。
$（'.manager'）。每个（函数（）{
var$this=$（this）；
$this.append（$this.find（'.dd\u option'）.get（）.sort（函数（a，b）{
返回$（a）.data（'index'）-$（b）.data（'index'）；
}));
});
HTML:
索内斯
史密斯
蛋黄白兰地
麦克利什


如果有用，请欣赏。
如果无法更改html，请使用css


.dd\u列表{
显示器：flex；
弯曲方向：立柱；
}
.dd\u列表分区：第n个子项（1）：非（.dd\u选项）{
颜色：红色；
顺序：3；
}
.dd\u列表分区：第n个子项（2）：非（.dd\u选项）{
颜色：绿色；
顺序：1；
}
.dd\u列表分区：第n个子项（3）：非（.dd\u选项）{
颜色：橙色；
顺序：2；
}
.dd\u列表分区：第n个子项（4）：非（.dd\u选项）{
颜色：橄榄色；
顺序：4；
}

索内斯
史密斯
蛋黄白兰地