我正在开发一个导航菜单,其中包含多个ul元素及其各自的子元素或li。我想仅在具有特定子项数的ul元素上更改类名。 我尝试了以下方法,但它将函数应用于所有ul元素,无论它包含多少个子元素。
if( $('ul.menu_container > li').length >= 3 ){
$('ul.menu_container').attr('class','mynewclass');}};
这是HTML部分:
<ul class="menu_container">
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
<li>menu item 4</li>
</ul>
<ul class="menu_container">
<li>menu item 1</li>
</ul>
<ul class="menu_container">
<li>menu item 1</li>
</ul>
希望我对我的问题以及我想要完成的事情已经足够清楚了。提前感谢我的帮助。
答案 0 :(得分:1)
您需要遍历所有ul
尝试此
$('.menu_container').each(function(){
if( $(this).find('li').length >= 3 ){
$(this).addClass('mynewclass');
}
});
答案 1 :(得分:0)
嗯,只是看看你的代码,我看到如果满足条件,那么类“mynewclass”将应用于带有ul.menu_container的每个元素。为了让代码工作,你需要像这样形成它:
if( $('ul.menu_container > li').length >= 3 ){
$(this).attr('class','mynewclass');}
但我相当肯定这不会起作用,因为它只会评估第一个匹配集。您需要使用.each()函数编写代码。
答案 2 :(得分:0)
您可以随时向第一组菜单项添加其他类,并将该新类用作选择器:
<ul class="menu_container NEW_CLASS_NAME">
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
<li>menu item 4</li>
</ul>
...
然后使用以下代码添加新类:
$('.NEW_CLASS_NAME').addClass("mynewclass");