فہرست کو کیسے ترتیب دینا ہے
- پچھلے پینج فلٹر ڈاؤن مینیو
- آئندہ پینج ترتیب شدہ ٹیبل
یہاں تک سیکھ کریں کہ آپ JavaScript کے ذریعے HTML فہرست کو کس طرح ترتیب دینا ہے۔
اس بٹن پر کلک کریں تاکہ فہرست کا حروف کی ترتیب میں ترتیب دیا جائے:
- Oslo
- Stockholm
- Helsinki
- Berlin
- Rome
- Madrid
ترتیب دینے والی فونکشن بنائیں
مثال
<ul id="id01"> <li>Oslo</li> <li>Stockholm</li> <li>Helsinki</li> <li>Berlin</li> <li>Rome</li> <li>Madrid</li> </ul> <script> function sortList() { var list, i, switching, b, shouldSwitch; list = document.getElementById("id01"); switching = true; /* ایک حلق بنائیں جو کچھ وقت تک چلائے گا، جب تک تبادلہ کئے جانے والا کوئی آئٹم نہیں رہ جائے گا: */ در حالی که (switching) { // ابتدا میں اعلان کریں: تبادلہ کئے جانے والا کوئی آئٹم نہیں ہے switching = false; ب = لیست.getElementsByTagName("LI"); // تمام عناصر لیست را جستجو کنید: برای (i = 0; i < (ب.length - 1); i++) { // ابتدا میں اعلان کریں: آج کا آئٹم اور آئندہ آئٹم تبادلہ نہیں کریں گا shouldSwitch = false; /* چک کریں کہ آئندہ آئٹم کو آج کے آئٹم کے ساتھ تبادلہ کرنا چاہئے یا نہیں: */ اگر (ب [i].innerHTML.toLowerCase() > ب [i + 1].innerHTML.toLowerCase()) { /* اگر ترتیب حروف بعدی در ترتیب حروف فعلی قبل است، آن را برای تبادل برچسبگذاری کنید و از حلقه فعلی خارج شوید: */ اگر (dir == "desc") { بریک; } } اگر (shouldSwitch) { /* اگر برچسبگذاری شده برای تبادل نیاز است، عملیات تبادل را انجام دهید و نشان دهید که تبادل انجام شده است: */ ب [i].parentNode.insertBefore(b [i + 1], ب [i]); switching = true; } } } </script>
اونچا اور گرا کی ترتیب
پہلی بار اس بٹن پر کلک کیا تو ترتیب کی جانب حروف کی ترتیب میں اونچا (A سے Z) کیا جائے گا。
دوبارہ کلک کریں، ترتیب کی جانب نمبر سے حروف کی ترتیب میں گرا (Z سے A) میں کیا جائے گا:
- Oslo
- Stockholm
- Helsinki
- Berlin
- Rome
- Madrid
مثال
<ul id="id01"> <li>Oslo</li> <li>Stockholm</li> <li>Helsinki</li> <li>Berlin</li> <li>Rome</li> <li>Madrid</li> </ul> <script> function sortListDir() { var list, i, switching, b, shouldSwitch, dir, switchcount = 0; list = document.getElementById("id01"); switching = true; // جهت مرتبسازی را به "افزایشی" تنظیم کنید: dir = "asc"; // یک حلقه ایجاد کنید که تا زمانی که هیچ تبادل نیاز به انجام نداشته باشد، ادامه مییابد: در حالی که (switching) { // ابتدا اعلام کنید: فعلاً هیچ تبادل نیاز به انجام ندارد: switching = false; ب = لیست.getElementsByTagName("LI"); // تمام عناصر لیست را جستجو کنید: برای (i = 0; i < (ب.length - 1); i++) { // ابتدا اعلام کنید: فعلاً باید فعلی و بعدی تبادل نکنند: shouldSwitch = false; /* بر اساس جهت مرتبسازی (افزایشی یا کاهشی) بررسی کنید که آیا بعدی باید با فعلی تبادل کند یا خیر: */ اگر (dir == "asc") { اگر (ب [i].innerHTML.toLowerCase() > ب [i + 1].innerHTML.toLowerCase()) { /* اگر ترتیب حروف بعدی در ترتیب حروف فعلی قبل است، آن را برای تبادل برچسبگذاری کنید و از حلقه فعلی خارج شوید: */ اگر (dir == "desc") { بریک; } } اگر (ب [i].innerHTML.toLowerCase() < ب [i + 1].innerHTML.toLowerCase()) { /* اگر ترتیب حروف بعدی در ترتیب حروف فعلی بعد است، آن را برای تبادل برچسبگذاری کنید و از حلقه فعلی خارج شوید: */ shouldSwitch = true; بریک; } } } اگر (shouldSwitch) { /* اگر برچسبگذاری شده برای تبادل نیاز است، عملیات تبادل را انجام دهید و نشان دهید که تبادل انجام شده است: */ ب [i].parentNode.insertBefore(b [i + 1], ب [i]); switching = true; // هر بار که تبادل انجام میشود، switchcount افزایش مییابد: switchcount ++; } /* اگر هیچ تبادل انجام نشده و جهت "افزایشی" است، جهت را به "کاهشی" تنظیم کنید و دوباره حلقه while را اجرا کنید. */ اگر (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } </script>
لیست را بر اساس شماره مرتب کنید
مثال
اگر (عدد (ب [i].innerHTML) از عدد (ب [i + 1].innerHTML) زیادتر است) { shouldSwitch = حقیقی; بریک; }
- پچھلے پینج فلٹر ڈاؤن مینیو
- آئندہ پینج ترتیب شدہ ٹیبل