怎么查李有没有孩子 UL答案

【问题标题】：How to find if LI has children UL怎么查李有没有孩子 UL
【发布时间】：2014-01-12 11:55:55
【问题描述】：

我有以下结构：

<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 时，我只想做一些操作。

代码

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

【问题讨论】：

为什么不试试这个呢？ if($('li ul)')) alert("是");否则警报（“否”）；

标签： jquery html css

【解决方案1】：

使用:has selector

喜欢

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

【讨论】：

这得到了一个带有 ul 的 li 标签列表，但是 OP 询问如何判断“某些” li 下是否有 UL。

【解决方案2】：

这就是你要找的东西

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

Js Fiddle Demo

【讨论】：

这告诉 OP 是否有任何 li 下有 ul，但 OP 询问如何判断“某些”li 下是否有 UL。
对我也很好用

【解决方案3】：

你可以为你的直系子女试试这个：

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

}

或者这个在整个 li 中搜索一个 ul：

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


}

编辑

我没有在你的帖子中看到“确定”这个词，所以这里是一个编辑：

你有一个 ul > 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）

【讨论】：

这告诉 OP 是否有任何 li 下有 ul，但 OP 询问如何判断“某些”li 下是否有 UL。
试过但没用。粘贴了上面的 HTML 和我正在使用的代码。

【解决方案4】：

在您的特定代码中，您似乎需要使用 this 来引用被单击的元素，然后从那里找到父元素 <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
}

或者，如果 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 对象上的方法而不使用 if 来操作那些特定的 <li> 标签：

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

【讨论】：

在我的答案开头添加了对您的特定代码的修复（现在您已经显示了您的代码）。
你代码中的这一行对我有用 "if($(this).closest("li").children("ul").length)"

【解决方案5】：

你也可以使用长度

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

【讨论】：

我试过这段代码但没有用。我在上面粘贴了完整的 HTML。

【解决方案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/

【讨论】：

【解决方案7】：

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

【讨论】：

请尝试提供关于您的解决方案如何工作的精彩描述。请参阅：How do I write a good answer?。谢谢。

【解决方案8】：

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

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

【讨论】：