如何addClass li包装ul
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何addClass li包装ul相关的知识，希望对你有一定的参考价值。
我在Creating dropdown menu from simple list获得了代码
<ul id="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">_Submenu x</a></li>
<li><a href="#">_Submenu y</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
我试图添加类li包装器ul，已添加
var prev;
$('#nav li').each(function(){
if(/^_/.test (this.textContent) && prev){
prev.appendChild(this);
$("#nav ul li ul").prev().addClass("sub-icon");
$("#nav ul li ul li a").each(function(){
$(this).text($(this).text().replace (/[_]/,""))
})
}else{
prev = this.appendChild($('<ul class ="sub-nav">')[0]);
}
}).find('ul:empty').remove();
并生成html结构如下：
<ul id="nav">
<li><a class="sub-icon" href="#">Menu 1</a></li>
<li><a class="sub-icon" href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
</ul>
</li>
<li><a class="sub-icon" href="#">Menu 3</a></li>
</ul>
我怎样才能生成这样的结构，只添加一个类子图标
<ul id="nav">
<li><a href="#">Menu 1</a></li>
<li><a class="sub-icon" href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu x</a></li>
<li><a href="#">Submenu y</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
</ul>
谢谢您的帮助。
答案
所以你希望在包含li的ul中添加一个类...
尝试：
$("#nav ul li ul").parent("li").addClass("sub-icon");
另一答案
我会通过过滤sub并首先修改它们的文本以不同的方式处理这个问题。然后循环遍历sub并附加到sub <ul>（如果它已经存在）或添加它（如果它不存在）
// filter out the sub menu items and remove the `_`
var $subs = $('#nav li').filter(function(){
var $link = $(this).find('a'),
txt = $link.text(),
isSub = txt[0]==='_';
if(isSub){
$link.text(txt.slice(1))
}
return isSub;
});
// loop over sub menu items
$subs.each(function(){
var $prev = $(this).prev(),
$prevUl = $prev.find('ul');
if(!$prevUl.length){
// if prev `<li>` doesn't have sub `<ul>` add it and add the link class
$prevUl = $('<ul>').appendTo($prev);
$prev.find('a').addClass('sub-icon')
}
$prevUl.append(this);
})a.sub-icon{color:red}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">_Submenu x</a></li>
<li><a href="#">_Submenu y</a></li>
<li><a href="#">Menu 3</a></li>
</ul>以上是关于如何addClass li包装ul的主要内容，如果未能解决你的问题，请参考以下文章