jQuery如果li内部有一个ul子项，则将其作为要显示的第一个列表项

Question

我有一个多级导航菜单。列表项根据其HTML层次结构进行组织。我希望jquery找到里面有一个子ul的li，并将该列表项显示为ul.list1中的第一个项。

以下是示例HTML:

<ul class="list1">
  <li><a href="#">List item 1</a></li>
  <li><a href="#">List item 2</a></li>
  <li class="slicknav_parent"><a href="#">List item 3</a>
    <ul>
       <li><a href="#">Child Item 1</a></li>
       <li><a href="#">Child Item 2</a></li>
       <li><a href="#">Child Item 3</a></li>
       <li><a href="#">Child Item 4</a></li>
   </ul>
  </li>
  <li><a href="#">List item 4</a></li>
</ul>

在上面的内容中，我希望列表项3成为要显示的第一个列表项。如何使用jQuery实现这一点？

Answer 1

$( "ul.list1 li" ).has( "ul" ).prependTo("ul.list1");

Answer 2

您可以这样使用：

$("li").find("ul").each(function () {
    var theLI = $(this).closest("li"); // This is the `li`, which we are interested in.
    theLI.prependTo(theLI.closest("ul"));
});

prependTo()函数会将元素前置为第一个子元素。

您的代码中也有一个错误。您忘记关闭"list1"。

代码段

$(function () {
  $("li").find("ul").each(function () {
    var theLI = $(this).closest("li"); // This is the `li`, which we are interested in.
    theLI.prependTo(theLI.closest("ul"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list1">
  <li><a href="#">List item 1</a></li>
  <li><a href="#">List item 2</a></li>
  <li class="slicknav_parent"><a href="#">List item 3</a>
    <ul>
      <li><a href="#">Child Item 1</a></li>
      <li><a href="#">Child Item 2</a></li>
      <li><a href="#">Child Item 3</a></li>
      <li><a href="#">Child Item 4</a></li>
    </ul>
  </li>
  <li><a href="#">List item 4</a></li>
</ul>