डोम नोड्स को सॉर्ट करने का सबसे आसान तरीका?

Question

अगर मैं इस तरह एक सूची है:

<ul id="mylist"> 
    <li id="list-item1">text 1</li> 
    <li id="list-item2">text 2</li> 
    <li id="list-item3">text 3</li> 
    <li id="list-item4">text 4</li> 
</ul> 

सबसे आसान तरीका करने के लिए अपने पसंद के डोम नोड्स फिर से व्यवस्थित क्या है? (पेज लोड होने पर इसे स्वचालित रूप से होने की आवश्यकता होती है, कुकी से सूची-क्रम वरीयता प्राप्त होती है)

उदा।

<ul id="mylist"> 
    <li id="list-item3">text 3</li> 
    <li id="list-item4">text 4</li> 
    <li id="list-item2">text 2</li> 
    <li id="list-item1">text 1</li> 
</ul> 

Answer 1

वहाँ शायद यह करने के लिए एक आसान तरीका एक जे एस लाइब्रेरी का उपयोग है हालांकि, यहां एक काम कर समाधान वेनिला js का उपयोग कर रहा है।

var list = document.getElementById('mylist'); 

var items = list.childNodes; 
var itemsArr = []; 
for (var i in items) { 
    if (items[i].nodeType == 1) { // get rid of the whitespace text nodes 
     itemsArr.push(items[i]); 
    } 
} 

itemsArr.sort(function(a, b) { 
    return a.innerHTML == b.innerHTML 
      ? 0 
      : (a.innerHTML > b.innerHTML ? 1 : -1); 
}); 

for (i = 0; i < itemsArr.length; ++i) { 
    list.appendChild(itemsArr[i]); 
} 

Answer 2

आपको लगता है कि डीओएम नोड्स को सॉर्ट करने से अच्छा प्रदर्शन नहीं होता है। आपके जावास्क्रिप्ट में एक अलग दृष्टिकोण होगा जो उस डेटा का प्रतिनिधित्व करता है जो डीओएम नोड्स में जाता है, उस डेटा को सॉर्ट करता है, और उसके बाद डीओएम नोड्स वाले div को पुन: उत्पन्न करता है।

हो सकता है कि आपके पास ऐसे कई नोड्स क्रमबद्ध न हों, इसलिए इससे कोई फर्क नहीं पड़ता। मेरा अनुभव डीओएम में हेरफेर करके एचटीएमएल टेबल को सॉर्ट करने की कोशिश करने पर आधारित है, जिसमें सैकड़ों पंक्तियों और दो दर्जन कॉलम वाले टेबल शामिल हैं।

Answer 3

आप पहले से ही jQuery का उपयोग कर रहे हैं, मैं सलाह देते हैं tinysort: http://tinysort.sjeiti.com/

$("li").tsort({order:"asc"}); 
$("li").tsort({order:"desc"}); 

Answer 4

बहुत ज्यादा विश्लेषण करने के लिए इस तालिका में कुछ भी नया लाता है, तो बिना, मैं आम तौर पर इस का उपयोग करें:

function forEach(ar, func){ if(ar){for(var i=ar.length; i--;){ func(ar[i], i); }} } 
function removeElement(node){ return node.parentNode.removeChild(node); } 
function insertBefore(ref){ return function(node){ return ref.parentNode.insertBefore(node, ref); }; } 

function sort(items, greater){ 
    var marker = insertBefore(items[0])(document.createElement("div")); //in case there is stuff before/after the sortees 
    forEach(items, removeElement); 
    items.sort(greater); 
    items.reverse(); //because the last will be first when reappending 
    forEach(items, insertBefore(marker)); 
    removeElement(marker); 
} 

जहां आइटम एक ही माता पिता के बच्चों की एक सरणी है। हम आखिरी बार से शुरू करते हैं और शीर्ष पर शुरू होने वाले शीर्ष भाग में झिलमिलाहट से बचने के लिए पहले से शुरू करते हैं। मैं आम तौर पर इस तरह मेरे आइटम सरणी मिल:

forEachSnapshot(document.evaluate(..., 6, null), function(n, i){ items[i] = n; }); 

Answer 5

यह देखें कार्रवाई में: http://jsfiddle.net/stefek99/y7JyT/

jQuery.fn.sortDomElements = (function() { 
     return function(comparator) { 
      return Array.prototype.sort.call(this, comparator).each(function(i) { 
        this.parentNode.appendChild(this); 
      }); 
     }; 
    })(); 

संक्षिप्त

Answer 6

मेरे संस्करण, आशा उपयोगी दूसरों के लिए होगा:

var p = document.getElementById('mylist'); 
Array.prototype.slice.call(p.children) 
    .map(function (x) { return p.removeChild(x); }) 
    .sort(function (x, y) { return /* sort logic */; }) 
    .forEach(function (x) { p.appendChild(x); }); 

Answer 7

यहां डीओएम नोड्स को क्रमबद्ध करने के लिए एक ES6 फ़ंक्शन है:

const sortChildren = ({ container, childSelector, getScore }) => { 
    const items = [...container.querySelectorAll(childSelector)]; 

    items 
    .sort((a, b) => getScore(b) - getScore(a)) 
    .forEach(item => container.appendChild(item)); 
}; 

यहाँ कैसे आप क्रमबद्ध करना Untapped user reviews by score इसका इस्तेमाल करेंगे:

sortChildren({ 
    container: document.querySelector("#main-stream"), 
    childSelector: ".item", 
    getScore: item => { 
    const rating = item.querySelector(".rating"); 
    if (!rating) return 0; 
    const scoreString = [...rating.classList].find(c => /r\d+/.test(c)); 
    const score = parseInt(scoreString.slice(1)); 
    return score; 
    } 
});