तिथि के अनुसार divs क्रमबद्ध - जावास्क्रिप्ट, एचटीएमएल

यह मेरा एचटीएमएल है। कुछ विकल्प हैं। उनमें से प्रत्येक तत्व पी: तारीख और नाम है। मुझे इन divs को दिनांक "दिनांक" के माध्यम से दिनांकित करने की आवश्यकता है। नामों के साथ पी को अनदेखा करें

<div id="divs">
<div class="option">
<small class="text-muted"><i class="fa fa-clock-o date"></i>12.10.2018 12:05</small>
<p class="name">Jones</p>
</div>
<div class="option">
<small class="text-muted"><i class="fa fa-clock-o date"></i>12.11.2015 02:25</small>
<p class="name">Micheal</p>
</div>
<div class="option">
<small class="text-muted"><i class="fa fa-clock-o date"></i>02.11.2020 21:50</small>
<p class="name">Micheal</p>
</div>
</div>

कक्षा "तिथि" में दिनांक के अनुसार divs को कैसे क्रमबद्ध करें। मैंने इस स्क्रिप्ट की कोशिश की

var listitems = document.querySelectorAll("#option > date");

listitems.sort(function(a, b) {
return    $(b).text().toUpperCase().localeCompare($(a).text().toUpperCase());
});

$.each(listitems, function(index, item) {
mylist.append(item);
});

उत्तर:

उत्तर № 1 के लिए 1

चूंकि आप jQuery का उपयोग कर रहे हैं, यह अपेक्षाकृत आसान है।

  1. प्रतिनिधित्व करने वाले सरणी का एक jQuery ऑब्जेक्ट बनाएं <small> प्रत्येक के टैग .option। आपका मूल date चयनकर्ता के पास आपके एचटीएमएल में टैग नहीं है। वास्तविक तिथि भीतर है <small> टैग।

  2. बुलाएं sort कस्टम तुलना फ़ंक्शन का उपयोग करके इस सरणी पर फ़ंक्शन करें। यह आरोही क्रम में बदलता है, इसे बदलने के लिए अवरोही स्विच करें > साइन इन करें <

  3. बस मूल्यों को मुद्रित करें।

// Detach the DOM elements
var listitems = $("#divs").detach(".option");
var children = listitems.children();

// Sort directly with the DOM elements
children.sort(function(a, b) {
return new Date($(a).children().first().text() > $(b).children().first().text());
});

// Remove "old" DOM elements
listitems.empty();
// Append "new" DOM elements
listitems.append(children);
// Append list back to <body>
$("body").append(listitems);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divs">
<div class="option">
<small class="text-muted"><i class="fa fa-clock-o date"></i>12.10.2018 12:05</small>
<p class="name">Jones</p>
</div>
<div class="option">
<small class="text-muted"><i class="fa fa-clock-o date"></i>12.11.2015 02:25</small>
<p class="name">Micheal</p>
</div>
<div class="option">
<small class="text-muted"><i class="fa fa-clock-o date"></i>02.11.2020 21:50</small>
<p class="name">Micheal</p>
</div>
</div>

बस स्पष्ट करने के लिए, उपयोग करें .class एक वर्ग का चयन करने के लिए चयनकर्ताओं और #id चयनकर्ताओं को ids का चयन करने के लिए, और बस उपयोग करें tag टैग का चयन करते समय चयनकर्ता।

आप चुनने की कोशिश कर रहे थे #option, परंतु option आपके एचटीएमएल में एक कक्षा है। इसके अलावा, आप सभी का चयन करने की कोशिश कर रहे थे date के भीतर टैग #option आईडी। यहाँ नहीं हैं <date> अपने एचटीएमएल में टैग। वास्तविक तिथि केवल पाठ है जो भीतर है <small> टैग। <small ...><i ...></i>02.11.2020 21:50</small>

चयनकर्ताओं के बारे में और पढ़ें यहाँ

मैं दृढ़ता से आपको डीओएम के बारे में अधिक पढ़ने की सलाह देता हूं यहाँ


संबंधित सवाल
सबसे लोकप्रिय