Question

我有一个包含多个超链接的无序列表。为此，我拥有的javascript似乎正在对LI之间的所有内容进行排序，因为某些超链接指向其他域，这使事情变得一团糟。无论如何，它会根据列表的标题或名称进行更新以进行排序吗？

<script type="text/javascript">
    function sortListDir() {
      var list, i, switching, b, shouldSwitch, dir, switchcount = 0;
      list = document.getElementById("id01");
      switching = true;
      // Set the sorting direction to ascending:
      dir = "asc";
      // Make a loop that will continue until no switching has been done:
      while (switching) {
        // Start by saying: no switching is done:
        switching = false;
        b = list.getElementsByTagName("LI");
        // Loop through all list-items:
        for (i = 0; i < (b.length - 1); i++) {
          // Start by saying there should be no switching:
          shouldSwitch = false;
          /* Check if the next item should switch place with the current item,
          based on the sorting direction (asc or desc): */
          if (dir == "asc") {
            if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
              /* If next item is alphabetically lower than current item,
              mark as a switch and break the loop: */
              shouldSwitch = true;
              break;
            }
          } else if (dir == "desc") {
            if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
              /* If next item is alphabetically higher than current item,
              mark as a switch and break the loop: */
              shouldSwitch= true;
              break;
            }
          }
        }
        if (shouldSwitch) {
          /* If a switch has been marked, make the switch
          and mark that a switch has been done: */
          b[i].parentNode.insertBefore(b[i + 1], b[i]);
          switching = true;
          // Each time a switch is done, increase switchcount by 1:
          switchcount ++;
        } else {
          /* If no switching has been done AND the direction is "asc",
          set the direction to "desc" and run the while loop again. */
          if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
          }
        }
      }
    }
</script>

我的清单目前非常简单。示例：

<ul id="id01">
   <li><a href="####">Something</a></li>
   <li><a href="####">Something</a></li>
   <li><a href="####">Something</a></li>
</ul>

Answer 1

使用Array#sort()对元素数组进行排序更简单，然后遍历已排序的元素并追加回列表中

function sortList(dir) {
  var list = document.querySelector('#id01')
  var items = Array.from(list.childNodes).sort(function(a, b) {
    var aTxt = a.textContent.trim(),
      bTxt = b.textContent.trim(),
      ref = dir === 'desc' ? bTxt : aTxt,
      comp = dir === 'desc' ? aTxt : bTxt;
    return ref.localeCompare(comp)
  });
  items.forEach(function(el) {
    list.appendChild(el)
  });
}

// sort buttons for demo
['asc', 'desc'].forEach(function(dir) {
  document.querySelector('#' + dir).addEventListener('click', function(e) {
    sortList(dir)
  })
})

<button id="asc">Sort Asc</button><button id="desc">Sort desc</button>

<ul id="id01">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
  <li><a href="#">Six</a></li>
</ul>

排序包含超链接的无序列表

1 个答案: