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

明白，如果它是有用的。