如何在ul中包装一组li标签

How to wrap groups of li tags inside ul

本文关键字：一组 li 标签 ul 包装      更新时间：2023-09-26

我有一个导航菜单它包含了一堆li标签其中一些有"sub-item"类我想把这些li标签分组到一个ul中所以我的导航是这样的

<ul class='main-menu'>
    <li><a href="#">Home</a></li>
    <li><a href="#">Pages</a></li>
    <li class='sub-item'><a href="#">_Contact Us</a></li>
    <li class='sub-item'><a href="#">_Community</a></li>
    <li class='sub-item'><a href="#">_About Me</a></li>
    <li class='sub-item'><a href="#">_Blog</a></li>
    <li><a href="#">DropDown </a></li>
    <li class='sub-item'><a href="#">_Sub Menu 1</a></li>
    <li class='sub-item'><a href="#">_Sub Menu 2</a></li>
    <li class='sub-item'><a href="#">_Sub Menu 3</a></li>
    <li class='sub-item'><a href="#">_Sub Menu 4</a></li>
    <li><a href="#">Sign Out</a></li>
</ul>

将变成这样:

<ul id='main-menu'>
    <li><a href="#">Home</a></li>
    <li><a href="#">Pages</a></li>
    <ul class="sub-menu">
      <li class='sub-item'><a href="#">_Contact Us</a></li>
      <li class='sub-item'><a href="#">_Community</a></li>
      <li class='sub-item'><a href="#">_About Me</a></li>
      <li class='sub-item'><a href="#">_Blog</a></li>
    </ul>
    <li><a href="#">DropDown </a></li>
    <ul class="sub-menu">
      <li class='sub-item'><a href="#">_Sub Menu 1</a></li>
      <li class='sub-item'><a href="#">_Sub Menu 2</a></li>
      <li class='sub-item'><a href="#">_Sub Menu 3</a></li>
      <li class='sub-item'><a href="#">_Sub Menu 4</a></li>
    </ul>
    <li><a href="#">Sign Out</a></li>
</ul>

这是我的尝试，但不幸的是它没有工作:

$('.main-menu li a').each(function() {
  var $this = $(this),
    content = $this.text();
  if (content.indexOf('_') != -1) {
    $this.parent('li').addClass('sub-item');
  }
});
$('.sub-item').wrapAll('<ul class="sub-menu"></ul>');

下面是一个JsFiddle演示:http://jsfiddle.net/hc05fhxr/1/

您的问题中给出的期望输出无效，因为li不能将ul作为其内容。

我可能的替代方法是添加新的ul作为先前锚的后代

$('li:not(.sub-item)').each(function() {
  var $li = $(this),
    $subs = $li.nextUntil(':not(.sub-item)');
  if ($subs.length) {
    $('<ul />', {
      'class': 'sub-menu'
    }).html($subs).appendTo($li);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class='main-menu'>
  <li><a href="#">Home</a></li>
  <li><a href="#">Pages</a></li>
  <li class='sub-item'><a href="#">Contact Us</a></li>
  <li class='sub-item'><a href="#">Community</a></li>
  <li class='sub-item'><a href="#">About Me</a></li>
  <li class='sub-item'><a href="#">Blog</a></li>
  <li><a href="#">DropDown </a></li>
  <li class='sub-item'><a href="#">Sub Menu 1</a></li>
  <li class='sub-item'><a href="#">Sub Menu 2</a></li>
  <li class='sub-item'><a href="#">Sub Menu 3</a></li>
  <li class='sub-item'><a href="#">Sub Menu 4</a></li>
  <li><a href="#">Sign Out</a></li>
</ul>

应该使用prev()和after()的组合

$('.main-menu li').each(function(index, el) {
  var el = $(el);
    if (!el.hasClass("sub-item"))    {
        el.after($("<ul></ul>"));
    } else {
        el.prev("ul").append(el);
    }
});
$('.main-menu ul:empty').remove()

这是你的小提琴更新:http://jsfiddle.net/hc05fhxr/3/

相关文章：