Как найти, если LI имеет детей UL

Question

I имеют следующую структуру:

<ul> 
    <li class="static"> 
     <ul class="static"> 
     </ul> 
    </li> 
    <li class="static"></li> 
</ul> 

Как вы можете видеть, что первый элемент LI имеет UL внутри него, но следующий один не делает. Есть ли способ узнать через jquery, если у определенного LI есть UL внутри него или нет? Я хочу сделать что-то вроде этого:

if(li has children ul) 
{ 
    do something 
} 

EDIT

Я попытался следующие, но она показывает «YES» для всех случаев. Вот мой код и HTML. В приведенном ниже HTML только «Link2» содержит дочерний UL, а не Link1 и Link3. Я просто хочу выполнить некоторую операцию, когда пользователь нажимает на какой-то LI, который содержит дочерний UL.

КОД

$('#DeltaPlaceHolderLeftNavBar div > div > ul > li > a').click(function() 
{ 
    if($('li:has(> ul)')) 
     alert("yes"); 
    else 
    alert("no"); 
}); 

HTML

<div class="ms-core-navigation" id="DeltaPlaceHolderLeftNavBar"> 
<div id="ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager"> 
    <div class=" noindex ms-core-listMenu-verticalBox" id="zz14_V4QuickLaunchMenu"> 
    <ul class="root ms-core-listMenu-root static" id="zz15_RootAspMenu"> 
    <li class="static"> 
    <a href="link1.php" tabindex="0" class="someclass1"> 
     <span class="someclass2"> 
     <span class="menu-item-text">Link1</span> 
     </span> 
    </a> 
    </li> 
    <li class="static"> 
    <a href="link2.aspx" tabindex="0" class="someclass3"> 
     <span class="someclass2"> 
     <span class="menu-item-text">Link2</span> 
     </span> 
    </a> 
    <ul class="static"> 
     <li class="static"> 
     <a href="Link2A.php" tabindex="0" class="someclass1"> 
     <span class="someclass2"> 
     <span class="menu-item-text">Link2A</span> 
     </span> 
     </a> 
     </li> 
     <li class="static"> 
     <a href="Link2B.php" tabindex="0" class="someclass1"> 
     <span class="someclass2"> 
     <span class="menu-item-text">Link2B</span> 
     </span> 
     </a> 
     </li> 
    </ul> 
    </li> 
    <li class="static"> 
    <a href="Link3.php" tabindex="0" class="someclass1"> 
     <span class="someclass2"> 
     <span class="menu-item-text">Link3</span> 
     </span> 
    </a> 
    </li> 
    </ul> 
    </div> 
</div> 
</div> 

Answer 1

В вашем конкретном коде, это выглядит, как вам нужно использовать this, чтобы обратиться к элементу, который был нажат, а затем найти родителя <li> оттуда, чтобы вы были работающий на только <li> что было щелчок в нем:

$('#DeltaPlaceHolderLeftNavBar div > div > ul > li > a').click(function() { 
    if($(this).closest("li").children("ul").length) { 
     // the clicked on <li> has a <ul> as a direct child 
    } 
}); 

---

В JQuery, вы можете использовать либо .find("ul") или .children("ul") в зависимости от того, что вы ищете только непосредственные потомок или любой потомок.

Например, если вы хотите узнать, есть ли конкретный <li> тег, который у вас уже есть ссылка на есть <ul> как прямой потомок, то вы можете сделать это:

if ($(el).children("ul").length) { 
    // el has a ul as an immediate descendant 
} 

Или, если уль может быть любым потомком, то вы можете использовать это:

if ($(el).find("ul").length) { 
    // el has a ul as a descendant at any level 
} 

---

Если вы хотите просто найти все <li> тегов с <ul> ниже их, то у вас есть эти два варианта:

Вы можете получить список всех <li> тегов с <ul> где-нибудь внутри него, как это:

var tags = $("li").filter(function() { 
    return $(this).find("ul").length !== 0; 
}); 

Если вы хотите только непосредственные потомки, вы можете использовать это:

var tags = $("li").filter(function() { 
    return $(this).children("ul").length !== 0; 
}); 

---

Вы можете работать на этих конкретных <li> тегов, просто вызывая метод на JQuery объект без использования if:

var tags = $("li > ul").addClass("hasSubMenu"); 

Answer 2

использовать :has selector

как

$('#DeltaPlaceHolderLeftNavBar div > div > ul > li > a').click(function() { 
    if ($(this).closest('li').has('ul').length) { 
     alert("yes"); 
    } else { 
     alert("no"); 
    } 
}); 

Answer 3

Это то, что вы ищете

$('li:has(> ul)'); 

Js Fiddle Demo

Answer 4

Вы можете попробовать это для прямых детей под вашим Ли:

if($('li>ul').length > 0){ 

} 

или это искать всю Ли для ул:

if($('li').find('ul').length > 0){ 


} 

EDIT

я не видел слово «определенный» в вашем посте, так Херес редактирование:

У вас есть ул> li> уль структура, я сделал такую ​​же структуру, но немного более основной, так вы можете видеть, что происходит и как это работает. HTML:

<ul> 
    <li><a href="#">Level 1</a> 
     <ul> 
      <li><a href="#">Level 2</a></li> 
     </ul> 
    </li> 

</ul> 

JS:

$("ul>li>a").click(function(e){ 
    if($(this).parent().find('ul').length > 0){ 
    alert('Yeah, we have a ul'); 
    }else{ 
    alert('Nope, no ul'); 
    } 
}); 

http://jsfiddle.net/Milanzor/NsPP7/ (Мой HTML)

и http://jsfiddle.net/Milanzor/NsPP7/1/ (Ваш HTML)

Answer 5

Вы можете использовать длину, а

if($('li.static').children('ul').length > 0) { 
     //do something... 
} 

Answer 6

к ЮВ, если прямой потомок тока щелкнул LI имеет UL Я использую метод ниже, это гарантирует, что если вы выбрали пункт меню в подменю не разрушится предыдущее меню:

HMTL:

<nav> 
    <ul> 
     <li><a href="#">Item</a></li> 
     <li><a href="#">Item</a></li> 
     <li><a href="#">Item</a></li> 
     <li><a href="#">Item</a> 
      <ul> 
       <li><a href="#">Sub Item</a></li> 
       <li><a href="#">Sub Item</a></li> 
       <li><a href="#">Sub Item</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Item</a> 
      <ul> 
       <li><a href="#">Sub Item</a></li> 
       <li><a href="#">Sub Item</a></li> 
       <li><a href="#">Sub Item</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

Сценарий:

var nav = $('nav'); 

nav.find('li>a').on('click',function(e){ 

    e.preventDefault(); 

    var $this = $(this); 
    var $li = $this.parent(); 

    //set active state to clicked menu item: 
    $li.addClass('active').siblings().removeClass('active open'); 

      //look if there is a UL after the A, if so it contains submenu: 
    if($this.next().is('ul')){ 
     $li.toggleClass('open'); 
    } 

}); 

скрипку: https://jsfiddle.net/1fykp7wx/