jquery - 如何使用 JQuery 按子项的内容对 html 元素进行排序？

Question

我有类似的东西：

<div id="outer-wrapper">
  <div class="outer">
    <p>......</p>
    <span class="author">Deena</span>
  </div>
  ...
  <div class="outer">
    <p>......</p>
    <span class="author">Amanda</span>
  </div>
</div>

我想使用 span.author 的值订购 div.outer。

到目前为止，我设法编写了以下代码：

  var mylist = $('#outer-wrapper');
  var mylist2 = $('#outer-wrapper2');
  var listitems = mylist.find('.outer span.author');
  listitems.sort(function(a, b) {
    return $(a).html().toUpperCase().localeCompare($(b).html().toUpperCase());
  })
  $.each(listitems, function(idx, itm) { mylist2.append(itm); });

问题是这只是将跨度项而不是整个 div.outer 添加到#outer-wrapper2。

我怎样才能让它按我想要的方式工作？

谢谢！

Answer 1

您需要对.outer元素进行排序，并在 sort 函数中，根据从以下位置返回的 HTML 进行排序.author：

var mylist  = $('#outer-wrapper .outer').get(),
    mylist2 = $('#outer-wrapper2');

mylist.sort(function(a, b) {
    return $(a).find('.author').html().toUpperCase().localeCompare($(b).find('.author').html().toUpperCase());
});

mylist2.append(mylist);

小提琴