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>

我想按照预先确定的顺序对其进行排序：

史密斯
阿沃卡特
索内斯
麦克利什

我很欣赏这应该早点完成，理想情况下是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

Answer 2

你说的是预定的，所以我会尝试这样的事情：

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>')
});

注意：在此示例中，下拉列表由通用类选择，可能会对其他下拉列表产生影响，您应该为此找到一个唯一的选择器

Answer 3

试试这个：

$(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>')
  });
});

演示：http://jsfiddle.net/lotusgodkk/GCu2D/2085/

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

Answer 4

您可以尝试使用css顺序： https://www.w3schools.com/cssref/css3_pr_order.asp 浏览器支持信息： http://caniuse.com/#feat=flexbox

Answer 5

您可以保留所需预定订单的地图，然后按照包含的文本对项目进行排序，然后按顺序将它们重新插入DOM中。

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

var map = ['Smith', 'Advocaat', 'Souness', 'McLeish'];

$('.dd__list > div').sort(function(a,b) {
    var aText = $(a).text().trim();
    var bText = $(b).text().trim();
  
    return map.indexOf( aText ) - map.indexOf( bText );
}).appendTo('.dd__list')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

Answer 6

一个简单但“脏”的方法是清空容器并重建结果。我称之为脏，因为你需要知道生成元素的结构和类/ 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);
}

JSFiddle：https://jsfiddle.net/vkc5m8wz/

Answer 7

 Use this Code.

$('.manager').each(function(){
var $this = $(this);
$this.append($this.find('.dd__option').get().sort(function(a, b) {
    return $(a).data('index') - $(b).data('index');
 }));
});

HTML:
<div class="manager">
<div class="dd__list dd__openTobottom" style="max-height: 160px;">
    <div>
        <div class="dd__option" data-index="3" >Souness</div>
    </div>
    <div>
        <div class="dd__option" data-index="1">Smith</div>
    </div>
    <div>
        <div class="dd__option" data-index="2">Advocaat</div>
    </div>
    <div>
        <div class="dd__option" data-index="4">McLeish</div>
    </div>
</div>

欣赏它是否有用。

使用jQuery根据文本内容以特定顺序重新排序div

7 个答案: