چگونه لیست را مرتب کنید
- صفحه قبلی منوهای فیلتر کشویی
- صفحه بعدی جداول مرتبسازی
آموزش نحوه استفاده از 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") { break; } } اگر (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") { break; } } اگر (ب [i].innerHTML.toLowerCase() < ب [i + 1].innerHTML.toLowerCase()) { /* اگر ترتیب حروف در مورد بعدی پس از عنصر فعلی باشد، آن را به عنوان نیاز به تبادل مشخص کنید و از حلقه فعلی خارج شوید: */ shouldSwitch = true; break; } } } اگر (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 = true; break; }
- صفحه قبلی منوهای فیلتر کشویی
- صفحه بعدی جداول مرتبسازی