2

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

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

有没有办法将此类仅添加到顶级 parentli和所有其他（更深的） parent 的不同类li？

4

6 回答 6

0

您可以进行最近的检查，看看是否有任何父母是 li。

if ($element.closest("li").length === 0) {
  $element.addClass("topLvl");
} else {
  $element.addClass("innerLvl");
}
于 2012-09-25T15:57:30.423 回答
0

根据您希望类的名称是什么，我会使用它：

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

您可以在这里看到一个工作示例：http: //jsfiddle.net/russelluresti/3peCS/

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

于 2012-09-25T16:22:20.663 回答
0

这是一个递归解决方案：

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);
于 2012-09-25T16:17:39.737 回答
0

理想情况下，有一些绝对引用，例如 ID 或其他 top-most 独有的可搜索属性ul，但您可以解决这个问题。无论哪种方式，重要的是子选择器：>而不是隐式后代选择器。它将指定您只想找到比ul该顶级元素低这么多级别的 's。

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

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

你得到 allul是any 的任何后代（孩子、孙子、曾孙...） ，它们是 any的 li后代。相反，你会使用： ul

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

这只会让你得到一个thatul的子节点，它是树顶部特定节点的子节点。liul

如果树的顶部没有 id 或其他显式选择器，则顶层ul本身必须是 a divorbody或其他块级元素的子级。因此，只需添加顶层的父级，您就可以清楚地获得所需的层次结构ul：

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

另外：我忘记了您还希望能够li选择上面选择器未捕获的其他 parent 。您可以使用: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')
于 2012-09-25T17:07:34.500 回答
0

这是一种方法。

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

http://jsfiddle.net/MdBa5/

于 2012-09-25T16:06:33.243 回答
0

尝试：

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

http://jsfiddle.net/3UcdM/

于 2012-09-25T16:10:44.500 回答