使用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. McLeish

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

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

的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> 

明白，如果它是有用的。