javascript - jquery中的排序导航菜单

Question

我想用 jQuery 对导航菜单进行排序。导航菜单的结构是

<ul class="menu">
  <li class="item">
     <a class="link">one</a>
  </li>
  <li class="item">
     <a class="link">two</a>
  </li>
  <li class="item">
     <a class="link">three</a>
  </li>
  <li class="item">
     <a class="link">four</a>
  </li>
<ul>

我想根据a标签的内部 html 进行排序。jquery中有默认sort功能。但它只对字符串进行排序。我如何对菜单进行排序

Answer 1

var items = $('.menu li').get();
items.sort(function(a,b){ 
  var keyA = $(a).find('a').text();
  var keyB = $(b).find('a').text();

  if (keyA < keyB) return -1;
  if (keyA > keyB) return 1;
  return 0;
});
var ul = $('.menu');
ul.empty();
$.each(items, function(i, li){
  ul.append(li);
});

样本

Answer 2

var sortedList = jQuery('.menu > li').sort(function (a, b) {
    return (a.children[0].innerHTML > b.children[0].innerHTML) ? 1 : -1;
});

jQuery('.menu').html(sortedList);