jQuery 如何查李有没有孩子 UL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20757519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find if LI has children UL
提问by Frank Martin
I have the following structure:
我有以下结构：
<ul>
<li class="static">
<ul class="static">
</ul>
</li>
<li class="static"></li>
</ul>
As you can see the first LI element has UL inside it but the next one doesn't. Is there a way to find out through jquery if a certain LI has UL inside it or not? I want to do something like this:
如您所见，第一个 LI 元素内部有 UL，但下一个没有。有没有办法通过 jquery 找出某个 LI 里面是否有 UL？我想做这样的事情：
if(li has children ul)
{
do something
}
EDIT
编辑
I tried the following but it shows "YES" for all cases. Here's my code and HTML. In the HTML below, only "Link2" contains child UL and not Link1 and Link3. I just want to do some operation when a user clicks on some LI which contain child UL.
我尝试了以下操作，但在所有情况下都显示“是”。这是我的代码和 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
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>
回答by jfriend00
In your specific code, it looks like you need to use thisto refer to the element that was clicked on and then find the parent <li>from there so you are operating on only the <li>that had the click in it:
在您的特定代码中，您似乎需要使用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
}
});
In jQuery, you can use either .find("ul")or .children("ul")depending upon whether you're looking for only immediate descendants or any descendant.
在 jQuery 中，您可以使用.find("ul")或.children("ul")取决于您是只查找直接后代还是任何后代。
For example, if you want to find out if a particular <li>tag that you already have a reference to has a <ul>as a direct child, then you can do this:
例如，如果您想了解<li>您已经引用的特定标签是否将 a<ul>作为直接子代，那么您可以执行以下操作：
if ($(el).children("ul").length) {
// el has a ul as an immediate descendant
}
Or, if the ul can be any descendant, then you can use this:
或者，如果 ul 可以是任何后代，那么你可以使用这个：
if ($(el).find("ul").length) {
// el has a ul as a descendant at any level
}
If you want to just find all the <li>tags with <ul>below them, then you have these two options:
如果您只想找到它们下方的所有<li>标签<ul>，那么您有以下两个选择：
You can get a list of all <li>tags with a <ul>anywhere inside of it like this:
您可以像这样获取所有<li>标签的列表，其中包含<ul>任何位置：
var tags = $("li").filter(function() {
return $(this).find("ul").length !== 0;
});
If you only want immediate descendants, you can use this:
如果你只想要直接后代，你可以使用这个：
var tags = $("li").filter(function() {
return $(this).children("ul").length !== 0;
});
You can then operate on those particular <li>tags by just calling a method on the jQuery object without using the if:
然后，您可以<li>通过调用 jQuery 对象上的方法而不使用if:
var tags = $("li > ul").addClass("hasSubMenu");
回答by Sachin
回答by Arun P Johny
use the :has selector
使用:has 选择器
like
喜欢
$('#DeltaPlaceHolderLeftNavBar div > div > ul > li > a').click(function () {
if ($(this).closest('li').has('ul').length) {
alert("yes");
} else {
alert("no");
}
});
回答by Milanzor
You can try this for direct children under your li's:
您可以为您的 li 下的直系孩子尝试此操作：
if($('li>ul').length > 0){
}
or this to search the whole li for a ul:
或者这样在整个 li 中搜索 ul：
if($('li').find('ul').length > 0){
}
EDIT
编辑
I didn't see the word 'certain' in your post, so heres an edit:
我在你的帖子中没有看到“确定”这个词，所以这里有一个编辑：
You have an ul > li > ul structure, I have made this same structure but a little more basic, so you can see what happens and how it works. HTML:
你有一个 ul > li > ul 结构，我做了这个相同的结构，但更基本一点，所以你可以看到发生了什么以及它是如何工作的。HTML：
<ul>
<li><a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a></li>
</ul>
</li>
</ul>
JS:
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/(My HTML)
http://jsfiddle.net/Milanzor/NsPP7/（我的 HTML）
and http://jsfiddle.net/Milanzor/NsPP7/1/(Your HTML)
和http://jsfiddle.net/Milanzor/NsPP7/1/（你的 HTML）
回答by Mahesh Sapkal
You can use length as well
您也可以使用长度
if($('li.static').children('ul').length > 0) {
//do something...
}
回答by Plippie
To se if the direct descendant of the current clicked LI has a UL I use the method below, this makes sure that if you clicked a menu item in the submenu it does not collapse the previous menu:
要查看当前单击的 LI 的直接后代是否具有 UL，我使用以下方法，这可以确保如果您单击子菜单中的菜单项，它不会折叠上一个菜单：
HMTL:
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>
Script:
脚本：
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');
}
});
fiddle: https://jsfiddle.net/1fykp7wx/
回答by Omid Ahmadyani
jQuery(".shop-nav > div >ul > li > ul").prev("li").attr("data-toggle","dropdown");
