使用jQuery将不同的类添加到列表项父级

Question

I have a list with different levels of depth:

<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>

I am using the following jquery script to add a class to the parents:

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

Is there a way to add this class only to the top level parent li 's and a different class for all other (deeper) parent li 's?

Answer 1

You could run a closest check to see if there are any parents that are li.

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

Answer 2

Here is one way to do it.

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

http://jsfiddle.net/MdBa5/

Answer 3

Try:

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

http://jsfiddle.net/3UcdM/

Answer 4

Here's a recursive solution:

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/

If you know the ID of the parent of the topmost UL you could use it like so:

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

Answer 5

Depending on what you want the names of the classes to be, I'd use this:

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

You can see a working example here: http://jsfiddle.net/russelluresti/3peCS/

If you want special class names, and not number additions, you'd have to run a switch statement. But the concept is the same. Use a function inside addClass to determine the depth (by using parents() ) and return the appropriate value.

Answer 6

Ideally, there's some absolute reference like an ID or other searchable attribute that is unique to the top-most ul , but you can work around that. Either way, the important thing is the child selector: > instead of the implicit descendant selector. It will specify that you only want to find ul 's that are exactly so many levels below that top-level element.

When, in your base case, you use:

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

you get all ul 's that are any descendant (children, grandchildren, great-grandchildren...) of any li 's, that are descendant of any ul 's. Instead, you'd use:

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

which gets you only a ul that is the child of an li that is a child of the specific ul at the top of the tree.

If you don't have an id or other explicit selector for the top of the tree, the top-level ul must itself be a child of either a div or body or some other block-level element. So, you can clearly and distinctly get the hierarchy you want by just adding that parent of the top-level ul :

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

Also: I forgot that you also wanted to be able to select the other parent li 's that aren't captured by the selector above. You can do that using the :not selector, or JQuery's .not() method, like so:

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

To combine the two lines into one, you'd first add the deeperParent class to all such li 's, then filter for the top-level parent, and assign menuParent only there:

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