Question

我有一个导航菜单，其中包含一堆li标签，其中一些包含此类＆＃34;子项＆＃34;并且我想将这些li标签分组到ul中，所以我的导航就像这样：

public MainViewModel()
{
   LoadedControl = new FirstControlViewModel();
}

private ViewModelBase _LoadedControl;

public ViewModelBase LoadedControl
{
    get { return _LoadedControl; }
    set { _LoadedControl = value;
          NotifyPropertyChanged("LoadedControl");
    }
}

会变成这样：

<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>

这是一个JsFiddle演示：http://jsfiddle.net/hc05fhxr/1/

Answer 1

您问题中提供的所需输出无效，因为li无法将ul作为其内容。

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

的后代

＆＃13;

$('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);
  }
})

＆＃13;

<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>

＆＃13;

Answer 2

您应该使用组合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/

如何在ul中包装li标签组

2 个答案: