Question

我有以下结构：

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

修改

我尝试了以下但是对所有情况都显示“是”。这是我的代码和HTML。在下面的HTML中，只有“Link2”包含子UL而不包含Link1和Link3。我只想在用户点击包含子UL的一些LI时进行一些操作。

CODE

$('#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>进行操作点击其中的1}}：

$('#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
}

或者，如果ul可以是任何后代，那么你可以使用它：

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

然后，您可以通过在jQuery对象上调用方法而不使用<li>来操作这些特定的if标记：

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

Answer 2

这就是你要找的东西

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

Js Fiddle Demo

Answer 3

使用:has selector

喜欢

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

Answer 4

你可以试试这个直接的孩子：

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

}

或者这个搜索整个李的ul：

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


}

修改

我的帖子中没有看到“确定”这个词，所以继续编辑：

你有一个ul＆gt; li> ul结构，我已经做了相同的结构，但更基本，所以你可以看到发生了什么以及它是如何工作的。 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：

[4;6;8;3;5]

<强>脚本：

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

小提琴：https://jsfiddle.net/1fykp7wx/

Answer 7

jQuery(".shop-nav > div >ul > li > ul").prev("li").attr("data-toggle","dropdown");

Answer 8

我认为每种方法都适合您。尝试遍历li以查找是否有ul作为孩子，如果是，则将红色列表背景变成红色或任何您想要的颜色。

  $('.top-menu > ul > li').each (function(){
    if($(this).children('ul').length) {
      $(this).css('background', 'red');
    }
  });

如何找到LI是否有孩子UL

8 个答案: