मेरे पास एक अनियंत्रित सूची है:
<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&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&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&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);
}
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&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&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&token=407ed4f5-b530-4149-99f6-fde685fba34a">5-10-2019</a></li></ul>
आपको अपना कोड इतना बदलने की आवश्यकता नहीं है:
आपको केवल वह परिवर्तन करने की आवश्यकता है:
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>
यहां आपके लक्ष्य को प्राप्त करने का एक और तरीका है जो टेक्स्ट को तिथियों के रूप में पार्स करता है, कंटेनर को साफ़ करता है और फिर इसे नए बनाए गए 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>
आप 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&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);
});