基於屬性'數據排序'在JQuery中排序Div？

Question

如果我有幾個的div：

<div data-sort='1'>div1</div> 
<div data-sort='4'>div4</div> 
<div data-sort='8'>div8</div> 
<div data-sort='12'>div12</div> 
<div data-sort='19'>div19</div> 

我動態創建的div：

<div data-sort='14'>div1</div> 
<div data-sort='6'>div1</div> 
<div data-sort='9'>div1</div> 

我怎樣才能讓他們只是有點進入已經加載順序的div，而無需重新加載所有的divs？

我認爲我需要在屏幕上構建所有div的數據排序值的數組，然後看看新的div適合在哪裏，但我不確定這是否是最好的辦法。

任何幫助表示讚賞

Answer 1

使用此功能

$('div').sort(function (a, b) { 

     var contentA =parseInt($(a).attr('data-sort')); 
     var contentB =parseInt($(b).attr('data-sort')); 
     return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0; 
    }) 

你可以添加新的div

Answer 2

你可以嘗試jQuery的，有一個很好的排序插件可用。

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

Answer 3

我提出這個爲jQuery函數之後調用此函數：

jQuery.fn.sortDivs = function sortDivs() { 
    $("> div", this[0]).sort(dec_sort).appendTo(this[0]); 
    function dec_sort(a, b){ return ($(b).data("sort")) < ($(a).data("sort")) ? 1 : -1; } 
} 

所以你有一個像「#boo」和所有你的小divs裏面的大div有：

$（「＃boo」）。sortDivs（）;

由於Chrome中存在缺陷，您需要「？1：-1」，否則不會排序超過10個div！ http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

Answer 4

在這裏回答了同樣的問題：

• https://stackoverflow.com/a/23298715/1007358

重新發布：

經過很多的解決方案，我決定在博客上寫下如何在jQuery的排序搜索後[1]。總之，通過數據屬性排序jquery「類數組」對象的步驟...

1. 選擇經由jQuery選擇所有對象
2. 轉換爲實際的陣列（未陣列狀jquery對象）
3. 排序對象的數組
4. 轉換回jquery對象與DOM對象的數組

的Html

<div class="item" data-order="2">2</div> 
<div class="item" data-order="1">1</div> 
<div class="item" data-order="4">4</div> 
<div class="item" data-order="3">3</div>

平原jQuery選擇

> $('.item') 
[<div class="item" data-order="2">2</div>, 
<div class="item" data-order="1">1</div>, 
<div class="item" data-order="4">4</div>, 
<div class="item" data-order="3">3</div> 
]

這個由數據順序

function getSorted(selector, attrName) { 
    return $($(selector).toArray().sort(function(a, b){ 
     var aVal = parseInt(a.getAttribute(attrName)), 
      bVal = parseInt(b.getAttribute(attrName)); 
     return aVal - bVal; 
    })); 
}

> getSorted('.item', 'data-order') 
[<div class="item" data-order="1">1</div>, 
<div class="item" data-order="2">2</div>, 
<div class="item" data-order="3">3</div>, 
<div class="item" data-order="4">4</div> 
]

希望這有助於排序讓！

[1] http://blog.troygrosfield.com/2014/04/25/jquery-sorting/

Answer 5

我用這個排序，其中排序陣列將通過AJAX調用被改變的圖像的庫。希望對某人有用。

var myArray = ['2', '3', '1']; 
 
var elArray = []; 
 

 
$('.imgs').each(function() { 
 
    elArray[$(this).data('image-id')] = $(this); 
 
}); 
 

 
$.each(myArray,function(index,value){ 
 
    $('#container').append(elArray[value]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id='container'> 
 
    <div class="imgs" data-image-id='1'>1</div> 
 
    <div class="imgs" data-image-id='2'>2</div> 
 
    <div class="imgs" data-image-id='3'>3</div> 
 
</div>

小提琴：http://jsfiddle.net/ruys9ksg/