Добавить класс родительского LI, если он содержит UL с классом = «ниспадающего меню»

Question

мне нужно добавить класс dropdown-submenu к родителю LI, если она имеет внутренний UL элемент с классом dropdown-menu. Это пример HTML-кода:

<ul class="dropdown-menu" id="menu1"> 
     <li> 
      <a href="#">More options</a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Second level link</a></li> 
       <li><a href="#">Second level link</a></li> 
       <li><a href="#">Second level link</a></li> 
       <li><a href="#">Second level link</a></li> 
       <li><a href="#">Second level link</a></li> 
      </ul> 
     </li> 
</ul> 

Я не пробовал еще ничего, потому что не знаю, как проверить, если <ul class="dropdown-menu"> существует в каждом LI элементе. Любая помощь?

Answer 1

Вы можете использовать JQuery .has()function:

$('li').has('ul.dropdown-menu').addClass('dropdown-submenu');

Или используйте :hasselector:

$('li:has(ul.dropdown-menu)').addClass('dropdown-submenu');

Answer 2

Может быть, это может помочь: -

$(document).ready(function() 
{ 

    if($('li ul').hasClass('dropdown-menu')) 
    { 
     $(this).addClass('dropdown-submenu'); 
    } 

}); 

Answer 3

Вы можете проверить длину ul с выпадающим меню. Если значение больше 0, класс существует.

Это должно работать для вас:

if($('ul.dropdown-menu').find('li').children('ul.dropdown-menu').length > 0) 
{ 
    var item = $('ul.dropdown-menu').find('li').children('ul.dropdown-menu'); 
    item.parent().addClass('dropdown-submenu'); 
} 
else 
{ 
    //do something - ul has no class with name .dropdown-menu 
} 

Вот пример Jsfiddle: http://jsfiddle.net/HvPtW/2/

Answer 4

Новая опция/пример от меня вроде как последний ответ, и вы можете улучшить для лучших когда-либо.

Html здесь:

<ul class="accordion"> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a> 
     <ul> 
      <li><a href="#">a</a></li> 
      <li><a href="#">b</a></li> 
     </ul> 
    </li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a> 
     <ul> 
      <li><a href="#">a</a> 
        <ul> 
         <li><a href="#">x</a></li> 
         <li><a href="#">y</a></li> 
         <li><a href="#">z</a></li> 
        </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

И коды JavaScript здесь:

$(".accordion > li:first > a").addClass("active"); 

    var item = $(".accordion > li").find("ul"); 
    if(item.length > 0){ 
     item.addClass("expand"); 
     item.find("ul").removeClass("expand").addClass("multi-expand"); 
     } 

Вот пример JSFiddle: http://jsfiddle.net/hPfPn/