排序jquery

Question

我有几个包含x内容的div。我可以通过数据对它们进行排序 - *这可以正常工作，但有些div（不是全部）后跟另一个带有“详细”类的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/