Jquery CSS嵌套 <li> 4级深度呼叫父母

Question

Okay so I am stylizing a dynamic menu so I can't just assign class names or even just html code this.

Here is what I am dealing with: I need to stylize each parent in something like this:

    <div class="menu">
    <ul>
     <li>
    Level 1
    <ul>
      <li>Level 2</li>
       <li>Level 2
           <ul>
           <li>Level 3</li>
           <li>Level 3</li>
           <li>Level 3
            <ul>
             <li>Level 4</li>
             <li>Level 4</li>
             <li>Level 4</li>
             <li>Level 4</li> 
            </ul>
           </li>
           </ul>
       </li>
        <li>Level 2</li>
         <li>Level 2</li>
    </ul>      
 </li>
</ul> 
</div>

And I need to change all the parents with a jquery afterwards with something like:

jQuery('.menu').find('li.parent').prepend('<i class="icon-plus"></i>');

I need to change all parents with a child menu. How do I do that? Thanks in advance

Answer 1

This should do the job, if I understand your question correctly:

jQuery('.menu li > ul').parent().prepend('<i class="icon-plus"></i>');

http://jsfiddle.net/Zgaj3/

Answer 2

我认为这可以适用于你的情况（ li：parent ）。

jQuery('.menu').find('li:parent').prepend('<i style="" class="icon-plus"></i>');

Answer 3

I am not sure, if I understood your question correctly.

Anyway, the simplest solution to what I think your problem is, would be to iterate through each ul-element following a .menu and check whether the parent is a li-element and apply your styling:

jQuery('.menu').find('ul').each(function(){
    if (jQuery(this).parent().is('li'))
        jQuery(this).parent().prepend('<i class="icon-plus"></i>');
});

Answer 4

I think you'll need an if statement, something like:

if ($('.menu>ul>li>ul')){
  $('.menu>ul').prepend('<i class="icon-plus"></i>');
}

Might have to do one for each level, so:

if ($('.menu>ul>li>ul>li>ul')){
  $('.menu>ul>li>ul').prepend('<i class="icon-plus"></i>');
}

Answer 5

// return all li elements inside of the menu class

$('.menu').find('li');

this will find the 4th level and each level after that.

$('.menu').find('ul li ul li ul li ul li').each(function(index, element){
  // validate that this is indeed correct
  // 4th level elements and deeper
  console.log(element);
  // do stuff
});

Honestly its better to just use a class when constructing these html elements. Its faster and help other people read the code.

Answer 6

I'm not sure about your requirements, but I think you are feeling difficulty in finding LI elements which contain a UL. The following code will help you find such elements.

$('.menu li>ul').parent().addClass('node')

Now you can do the required operation on this. Please come back if further help required.

Please mark as answer if it helped you.