Question

我有一个不同深度的列表：

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul class="sub-menu">
      <li>Sub item 1</li>
      <li>Sub item 2</li>
      <li>Sub item 3
        <ul class="sub-menu">
          <li>Subsub item 1</li>
          <li>Subsub item 2</li>
        </ul>
      </li>
      <li>Sub item 4</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

我使用以下jquery脚本向父类添加一个类：

$("ul li ul").parent().addClass("menuparent");

有没有办法只将这个类添加到顶级父li'，并为所有其他（更深）父li添加另一个类？

Answer 1

您可以运行最近的检查以确定是否有任何父母是li。

if ($element.closest("li").length === 0) {
  $element.addClass("topLvl");
} else {
  $element.addClass("innerLvl");
}

Answer 2

这是一种方法。

$("ul li ul").parent().addClass("otherclass");
$("ul li >ul").parent().removeClass("otherclass").addClass("menuparent");

http://jsfiddle.net/MdBa5/

Answer 3

尝试：

$("ul:first>li").addClass("menuparent")
    .find('li>ul').parent().addClass('otherparent');

http://jsfiddle.net/3UcdM/

Answer 4

这是一个递归解决方案：

function markNestedLists(par, level){
    par.addClass("level-" + level);

    par.children("li").children("ul").each(function(){
        markNestedLists($(this), level + 1);
    });     
}
markNestedLists($("ul").first(), 1);

http://jsfiddle.net/h9xvY/1/

如果您知道最顶层UL的父级ID，您可以这样使用它：

markNestedLists($("#myParent > ul"), 1);

Answer 5

根据你想要的类名，我会用这个：

$(function(){
    $('ul li').addClass(function(){
        return 'depth-' + $(this).parents('ul').length;            
    });        
});

您可以在此处查看一个有效的示例：http://jsfiddle.net/russelluresti/3peCS/

如果您需要特殊的类名，而不是数字添加，则必须运行switch语句。但这个概念是一样的。使用addClass内的函数来确定深度（使用parents()）并返回适当的值。

Answer 6

理想情况下，有一些绝对引用，例如ID或其他可搜索属性，对于最顶层的ul来说是唯一的，但您可以解决这个问题。无论哪种方式，重要的是子选择器：>而不是隐式后代选择器。它将指定您只想查找低于该顶级元素的ul。

在您的基本情况下，您使用：

$("ul li ul").parent()

你得到任何 ul 任何后代（儿童，孙子，曾孙......）的所有li个那是任何 ul的后代。相反，你要使用：

$("ul#topmost > li > ul").parent()

只能获得ul li ul <{1>} 在树的顶部。

如果您的树顶部没有ID或其他显式选择器，则顶级ul本身必须是div或body的子级或其他一些块级元素。因此，只需添加顶级ul的父级，即可清晰明确地获得所需的层次结构：

$("body > ul > li > ul").parent()

另外：我忘了您还希望能够选择上面的选择器未捕获的其他父li。您可以使用:not选择器或JQuery的.not()方法执行此操作，如下所示：

$("li>ul:not(body > ul > li > ul)").parent()

要将两行合并为一行，您首先要将deeperParent类添加到所有此类li，然后过滤顶级父级，并指定menuParent只有那里：

$("li>ul").parent().addClass('deeperParent').filter('body > ul > li').
     removeClass('deeperParent').addClass('menuParent')

使用jquery向列表项父项添加不同的类

6 个答案: