排序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/