विशेषता 'डेटा-सॉर्ट' के आधार पर Jquery में divs को सॉर्ट करें?

Question

तो मेरे पास है कई divs:

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

और मैं गतिशील divs बनाएँ:

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

मैं कैसे प्राप्त कर सकते हैं उन्हें सिर्फ तरह divs पहले से ही क्रम में लोड में, सभी को फिर से लोड करने के लिए बिना करने के लिए divs के?

मुझे लगता है कि मुझे स्क्रीन पर सभी divs के डेटा-सॉर्ट मानों की एक सरणी बनाने की आवश्यकता होगी, और फिर देखें कि नए divs कहाँ फिट हैं, लेकिन मुझे यकीन नहीं है कि यह सबसे अच्छा है या नहीं मार्ग।

किसी भी मदद

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; 
    }) 

तुम सिर्फ नए divs

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 है वहां:

$ ("# बू")। sortDivs();

आपको क्रोम में एक बग के कारण "? 1: -1" की आवश्यकता है, इसके बिना यह 10 से अधिक divs को क्रमबद्ध नहीं करेगा! http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html

Answer 4

यहाँ एक ही प्रश्न का उत्तर दिया:

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

repost करने के लिए:

कई समाधान मैं कैसे jQuery में सॉर्ट करने के लिए के बारे में ब्लॉग का फैसला किया के माध्यम से खोज करने के बाद [1]। संक्षेप में, डेटा विशेषता द्वारा jquery "array-like" ऑब्जेक्ट्स को सॉर्ट करने के चरण ...

1. jQuery चयनकर्ता के माध्यम से सभी ऑब्जेक्ट का चयन
2. वास्तविक सरणी (नहीं सरणी की तरह jQuery वस्तु)
3. तरह ऑब्जेक्ट की श्रेणी
4. डोम की सरणी के साथ jQuery वस्तु को वापस परिवर्तित वस्तुओं
में बदलने का

एचटीएमएल

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