Question

我正在尝试订购多层列表。我遇到的问题是子列表与我的主列表合并，这不是意图。我用的代码。

$('#test').click(function(e) {
    $(".first ul").each(function() {
        $(this).find('li').sort(function(a, b) {
            var aText = $(a).text(),
            bText = $(b).text();
            return aText < bText ? -1 : aText > bText ? 1 : 0;
        }).appendTo(this);
    });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-2-12" id="menu-mappen">
         <ul class="first sortable-folder">
          <li class="active"><a id="id1" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li>
          <li><a id="id2" href="#"><i class="far fa-folder"></i>Producten</a></li>
          <li><a id="id3" href="#"><i class="far fa-folder"></i>Homepage</a></li>
          <li class="has-children"><a id="id4" href="#"><i class="far fa-folder"></i>Bestanden</a>
            <ul class="first sortable-folder">
              <li><a id="id5" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li>
              <li><a id="id6" href="#"><i class="far fa-folder"></i>Producten</a></li>
              <li class="has-children"><a id="id4" href="#"><i class="far fa-folder"></i>Bestanden</a>
                <ul class=" first sortable-folder">
                  <li><a id="id5" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li>
                  <li><a id="id6" href="#"><i class="far fa-folder"></i>Producten</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a id="id7" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li>
        </ul>
        <button id="test"></button>

      </div>

我希望有人能帮助我。

Answer 1

将$(this).find('li')更改为$(this).children('li')

这样，每种排序都将应用于同级li元素。

＆＃13;

$('#test').click(function(e) {
  $(".first ul").each(function() {
    $(this).children('li').sort(function(a, b) {
      var aText = $(a).text(),
        bText = $(b).text();
      return aText < bText ? -1 : aText > bText ? 1 : 0;
    }).appendTo(this);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-2-12" id="menu-mappen">
  <ul class="first sortable-folder">
    <li class="active"><a id="id1" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li>
    <li><a id="id2" href="#"><i class="far fa-folder"></i>Producten</a></li>
    <li><a id="id3" href="#"><i class="far fa-folder"></i>Homepage</a></li>
    <li class="has-children"><a id="id4" href="#"><i class="far fa-folder"></i>Bestanden</a>
      <ul class="first sortable-folder">
        <li><a id="id5" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li>
        <li><a id="id6" href="#"><i class="far fa-folder"></i>Producten</a></li>
        <li class="has-children"><a id="id4" href="#"><i class="far fa-folder"></i>Bestanden</a>
          <ul class=" first sortable-folder">
            <li><a id="id5" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li>
            <li><a id="id6" href="#"><i class="far fa-folder"></i>Producten</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a id="id7" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li>
  </ul>
  <button id="test"></button>

</div>

＆＃13;

如何使用jquery按字母顺序对多层列表进行排序

1 个答案: