मेरे पास एक अनियंत्रित सूची है:

<ul id = "mylist">
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F10-10-2019%2Ftest%40gmail.com-10-10-2019.xlsx?alt=media&amp;token=21f64bfe-c7ce-4155-a24e-6684e784a8fd">10-10-2019</a></li>
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F11-10-2019%2Ftest%40gmail.com-11-10-2019.xlsx?alt=media&amp;token=36367037-770e-4e99-b405-571c5aa79a64">11-10-2019</a></li>
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F5-10-2019%2Ftest%40gmail.com-5-10-2019.xlsx?alt=media&amp;token=407ed4f5-b530-4149-99f6-fde685fba34a">5-10-2019</a></li></ul>

मैं उन्हें क्रमबद्ध करना चाहता हूं

<ul>
  <li a href="#">11-10-2019</a></li>
  <li a href="#">10-10-2019</a></li>
  <li a href="#">5-10-2019</a></li>
</ul>

PS : I want the same URL, just using '#' here to avoid work.

लेकिन वर्तमान में मैंने जो कोड लिखा है वह इसे ठीक से सॉर्ट नहीं कर रहा है। मुझे लगता है कि यह href की वजह से है?

मेरा कोड:

var container = document.getElementById("myList");
var contents = container.querySelectorAll("li");

var list = [];
for(var i=0; i<contents.length; i++){
    list.push(contents[i]);

}

list.sort(function(a, b){
    var aa = parseInt(a.innerHTML);
    var bb = parseInt(b.innerHTML);
    return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

/* list.reverse(); */

for(var i=0; i<list.length; i++){
    console.log(list[i].innerHTML);
    container.insertBefore(list[i], container.firstChild);
}


-1
SUIIIII 11 अक्टूबर 2019, 01:39

4 जवाब

सबसे बढ़िया उत्तर

आप दिनांक प्राप्त करने के लिए सीधे textContent li s का उपयोग कर सकते हैं और फिर उसी संरचना को मानकर उनकी तुलना सीधे दिनांक ऑब्जेक्ट के रूप में कर सकते हैं।

var container = document.getElementById("myList");
var contents = Array.from(container.querySelectorAll("li"));

contents = contents.sort(function(a, b){
    var aa = new Date(a.textContent.replace('-','/'));
    var bb = new Date(b.textContent.replace('-','/'));
    console.log(aa,bb);
    return aa < bb ? 1 : (aa > bb ? -1 : 0);
});

console.log(contents.map(x =>x.innerHTML));
while (container.firstChild) {
    container.removeChild(container.firstChild);
}

contents.forEach(content => {
  container.appendChild(content);
});
<ul id = "myList">
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F10-10-2019%2Ftest%40gmail.com-10-10-2019.xlsx?alt=media&amp;token=21f64bfe-c7ce-4155-a24e-6684e784a8fd">10-10-2019</a></li>
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F11-10-2019%2Ftest%40gmail.com-11-10-2019.xlsx?alt=media&amp;token=36367037-770e-4e99-b405-571c5aa79a64">11-10-2019</a></li>
 <li><a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F5-10-2019%2Ftest%40gmail.com-5-10-2019.xlsx?alt=media&amp;token=407ed4f5-b530-4149-99f6-fde685fba34a">5-10-2019</a></li></ul>
1
Dhananjai Pai 11 अक्टूबर 2019, 01:54

आपको अपना कोड इतना बदलने की आवश्यकता नहीं है:

आपको केवल वह परिवर्तन करने की आवश्यकता है:

var aa = new Date(a.querySelector('a').innerHTML).getTime();
var bb = new Date(b.querySelector('a').innerHTML).getTime();
var container = document.querySelector("#mylist");
var contents = container.querySelectorAll("li");

var list = [...contents];

list.sort(function(a, b){
    var aa = new Date(a.querySelector('a').innerHTML).getTime();
    var bb = new Date(b.querySelector('a').innerHTML).getTime();
    return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

/* list.reverse(); */

for(var i=0; i<list.length; i++){
    console.log(list[i].innerHTML);
    container.insertBefore(list[i], container.firstChild);
}
<ul id = "mylist">
  <li> <a href="#">10-10-2019</a></li>
  <li> <a href="#">11-10-2019</a></li>
  <li> <a href="#">5-10-2019</a></li>
</ul>
-1
Simon Dehaut 11 अक्टूबर 2019, 01:56

यहां आपके लक्ष्य को प्राप्त करने का एक और तरीका है जो टेक्स्ट को तिथियों के रूप में पार्स करता है, कंटेनर को साफ़ करता है और फिर इसे नए बनाए गए list items से भर देता है:

var container = document.getElementById("myList");
var contents = Array.from(container.querySelectorAll("li>a"));

contents.sort(function(a, b){
    var aa = Date.parse(a.textContent);
    var bb = Date.parse(b.textContent);
    return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

/* contents.reverse(); */

//clear the container
container.innerHTML = '';

for(var i=0; i<contents.length; i++){
    listElem = document.createElement('li');
    listElem.appendChild(contents[i]);
    
    container.appendChild(listElem);
}
<ul id="myList">
  <li><a href="#">10-10-2019</a></li>
  <li><a href="#">11-10-2019</a></li>
  <li><a href="#">5-10-2019</a></li>
</ul>
0
j3py 11 अक्टूबर 2019, 02:19

आप li तत्वों का चयन कर रहे हैं। उनका innerHTML ऐसा दिखता है:

'<a href="https://firebasestorage.googleapis.com/v0/b/cse611-3045f.appspot.com/o/test%40gmail.com%2F10-10-2019%2Ftest%40gmail.com-10-10-2019.xlsx?alt=media&amp;token=21f64bfe-c7ce-4155-a24e-6684e784a8fd">10-10-2019</a>'

इस मान के parseInt को क्रमबद्ध करने के बजाय, आपको a तत्वों के innerHTML को क्रमबद्ध करना चाहिए, और संभवत: parseInt की तुलना में इसका अधिक सटीक कार्य करना चाहिए। उदाहरण के लिए:

/// Compares two dates in d-m-Y format.
function compareDates(a, b) {
    var aParts = a.split('-').map(Number);
    var bParts = b.split('-').map(Number);

    return aParts[2] - bParts[2] ||
           aParts[1] - bParts[1] ||
           aParts[0] - bParts[0];
}

साथ

list.sort(function(a, b){
    var aDate = a.children[0].innerHTML;
    var bDate = b.children[0].innerHTML;

    return compareDates(aDate, bDate);
});
1
Ry- 11 अक्टूबर 2019, 01:50