如何将JQuery函数应用于具有特定子项数的相同类的元素?

时间:2013-09-10 23:25:31

标签: jquery html string-length

我正在开发一个导航菜单,其中包含多个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>

希望我对我的问题以及我想要完成的事情已经足够清楚了。提前感谢我的帮助。

3 个答案:

答案 0 :(得分:1)

您需要遍历所有ul尝试此

$('.menu_container').each(function(){
    if( $(this).find('li').length >= 3 ){
        $(this).addClass('mynewclass');
    }
});

FIDDLE

答案 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");