[英]How to wrap groups of li tags inside ul
I have a navigation menu that contains a bunch of li tags and some of them having this class "sub-item" and I want to group those li tags inside a ul so my navigation which is like this : 我有一个导航菜单,其中包含一堆li标记,其中一些具有此类的“子项目”,并且我想将这些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>
Will become like this : 会变成这样:
<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>
This is my attempt to do this but unfortunately it didn't worked : 这是我尝试执行的操作,但不幸的是它没有用:
$('.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>');
Here is a JsFiddle demo : http://jsfiddle.net/hc05fhxr/1/ 这是一个JsFiddle演示: http : //jsfiddle.net/hc05fhxr/1/
The desired output given in your question is invalid as li can't have ul
as its content. 您的问题中给出的期望输出无效,因为li不能包含
ul
作为其内容。
I possible alternate is to add the new ul
as a descendant of the previous anchor 我可能的替代方法是将新的
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>
You should use a combination prev() and after() 您应该结合使用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()
Here is your fiddle updated: http://jsfiddle.net/hc05fhxr/3/ 这是您的小提琴更新: http : //jsfiddle.net/hc05fhxr/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.