0

我正在开发一个导航菜单，该菜单有几个 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>

希望我对我的问题和我想要完成的事情足够清楚。提前感谢我可能得到的任何帮助。

4

3 回答 3

1

你需要遍历所有的ul尝试这个

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

小提琴

于 2013-09-10T23:41:12.107 回答
0

好吧，只要看一下您的代码，我就会看到如果满足条件，那么“mynewclass”类将使用ul.menu_container 应用于每个元素。为了使您的代码正常工作，您需要像这样格式化它：

if( $('ul.menu_container > li').length >= 3 ){
    $(this).attr('class','mynewclass');}

但我相当肯定这也行不通，因为它只会评估第一个匹配集。您将需要使用 .each() 函数编写代码。

于 2013-09-10T23:33:53.090 回答
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");
于 2013-09-10T23:42:04.077 回答