排序jquery後重新排列子div

Question

我有幾個包含x內容的div。我可以通過數據對它們進行排序 - *這可以正常工作，但有些div（不是全部）後面跟着另一個帶有「detail」類的div。排序後，這些div「丟失」。

我無法弄清楚如何排序後插入（如果存在） 代碼：

$('.sortableDiv').sort(sort_1).appendTo('#sortableContainer'); 
 

 
function sort_1(a, b) { 
 
    return ($(b).data('order')) < ($(a).data('order')) ? 1 : -1; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div id="sortableContainer"> 
 
<div class="sortableDiv" data-order="3">Div1</div> 
 
    <div class="child1 detail">Child1</div> 
 
<div class="sortableDiv" data-order="1">Div2</div> 
 
<div class="sortableDiv" data-order="2">Div3</div> 
 
    <div class="child3 detail">Child3</div> 
 
</div>

http://jsfiddle.net/g5p2gdy5/1/

Answer 1

這是因爲你有一個清單5項，但你只排序其中3個。

爲什麼不實際嵌套父div中的子div？

$('.sortableDiv').sort(sort_1).appendTo('#sortableContainer'); 
 

 
function sort_1(a, b) { 
 
    return ($(b).data('order')) < ($(a).data('order')) ? 1 : -1; 
 

 
}

.sortableDiv{ 
 
    background: #EEE; 
 
    border: 1px solid #CCC; 
 
    padding:3px; 
 
    margin-bottom:5px; 
 
} 
 

 
.detail{ 
 
    border: 1px solid red; 
 
    padding:3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div id="sortableContainer"> 
 
    <div class="sortableDiv" data-order="3">Div1 
 
    <div class="child1 detail">Child1</div> 
 
    </div>  
 
    <div class="sortableDiv" data-order="1">Div2</div> 
 
    <div class="sortableDiv" data-order="2"> 
 
    Div3 
 
    <div class="child3 detail">Child3</div> 
 
    </div> 
 
</div>

演示：http://jsfiddle.net/g5p2gdy5/3/

---

編輯

由於嵌套是不可能的，讓我們嘗試也與家長的div沿分揀孩子的div。父進程得到一個整數爲了像data-order="1"和孩子得到一個十進制數順序一樣data-order="1.1"和data-order="1.2"

$('.sortableDiv').sort(sort_1).appendTo('#sortableContainer'); 
 

 
function sort_1(a, b) { 
 
    return ($(b).data('order')) < ($(a).data('order')) ? 1 : -1; 
 

 
}

.sortableDiv:before{ 
 
    font-size: 12px; 
 
    color: red; 
 
    padding-right: 2px; 
 
    content: attr(data-order) 
 
} 
 

 
.detail{ 
 
    padding-left:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div id="sortableContainer"> 
 
    <div class="sortableDiv child1 detail" data-order="3.2">Child 1.2</div> 
 
    <div class="sortableDiv child1 detail" data-order="3.1">Child 1.1</div> 
 
    <div class="sortableDiv child3 detail" data-order="2.1">Child3</div> 
 
    
 
    <div class="sortableDiv" data-order="3">Div1</div> 
 
    <div class="sortableDiv" data-order="1">Div2</div> 
 
    <div class="sortableDiv" data-order="2">Div3</div> 
 
</div>

演示：http://jsfiddle.net/g5p2gdy5/4/