Question

我尝试使用<dt>链接中的值来对以下内容进行排序，同时使用以下<dd> DOM元素进行排序。

样品：

<div class="courseTree">
  <dt><input class="dept_checkbox" type="checkbox"><a href="">BBBB</a></dt>
  <dd class="options">
    <li>COURSE_BBB-AAA</li>
    <li>COURSE_BBB-CCC</li>
  </dd>     

  <dt><input class="dept_checkbox" type="checkbox"><a href="">AAAA</a></dt>
  <dd class="options">
    <li>COURSE_AAA-AAA</li>
    <li>COURSE_AAA-CCC</li>
  </dd>
</div>

我想做的事情：

<div class="courseTree">
  <dt><input class="dept_checkbox" type="checkbox"><a href="">AAAA</a></dt>
  <dd class="options">
    <li>COURSE_AAA-AAA</li>
    <li>COURSE_AAA-CCC</li>
  </dd>

  <dt><input class="dept_checkbox" type="checkbox"><a href="">BBBB</a></dt>
  <dd class="options">
    <li>COURSE_BBB-AAA</li>
    <li>COURSE_BBB-CCC</li>
  </dd>     
</div>

我尝试了以下但没有运气。

var dl = $(".courseTree");
$(dl).children('dt').each(function() {
    $(this).append($(this).next());
});
var sortedItems = $(dl).children('dt').sort();
$.each(sortedItems, function(i, dt) {
    $(dl).append(dt);
    $(dt).children('dd').each(function(j, dd) {
        $(dl).append($(dd));
    });
});

Answer 1

您可以将它们添加到数组中，然后对其进行排序。

＆＃13;

arr = [];
$(".container").each(function () {
  arr.push($(this).detach());
});
arr.sort(function(a,b) {
  return a.find("a:first").html() > b.find("a:first").html()
});
for (var i = 0; i < arr.length; i++) {
  $(".courseTree").append(arr[i][0].outerHTML);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="courseTree">
  <div class="container">
  <dt><input class="dept_checkbox" type="checkbox"><a href="">BBBB</a></dt>
  <dd class="options">
    <li>COURSE_BBB-AAA</li>
    <li>COURSE_BBB-CCC</li>
  </dd>     
  </div>

 <div class="container">
  <dt><input class="dept_checkbox" type="checkbox"><a href="">AAAA</a></dt>
  <dd class="options">
    <li>COURSE_AAA-AAA</li>
    <li>COURSE_AAA-CCC</li>
  </dd>
 </div>
</div>

＆＃13;

按字母顺序对描述术语进行排序，随后移动DOM元素

1 个答案: