如何找到LI是否有孩子UL [英] How to find if LI has children UL
问题描述
我有以下结构：
< ul>
< li class =static>
< ul class =static>
< / ul>
< / li>
< li class =static>< / li>
< / ul>
正如你所看到的，第一个LI元素在里面有UL，但下一个没有。有没有办法通过jquery查找某个LI是否有UL？我想要这样做：
if（li有孩子ul）
{
做某事
}
编辑
我尝试了以下内容，但是对于所有情况都显示YES。这是我的代码和HTML。在下面的HTML中，只有Link2包含子UL，而不包含Link1和Link3。我只是想在用户点击一些包含孩子UL的LI时做一些操作。
CODE
$（'＃DeltaPlaceHolderLeftNavBar div div> div> ul> li> a'）。click（function（）
{$ b $如果（$（'li：has（> ul）'））
alert（yes）;
else
alert（no）;
}） ;
HTML
< div class =ms-core-navigationid =DeltaPlaceHolderLeftNavBar>
< div id =ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager>
< div class =noindex ms-core-listMenu-verticalBoxid =zz14_V4QuickLaunchMenu>
< ul class =root ms-core-listMenu-root staticid =zz15_RootAspMenu>
< li class =static>
< a href =link1.phptabindex =0class =someclass1>
< span class =someclass2>
< span class =menu-item-text> Link1< / span>
< / span>
< / a>
< / li>
< li class =static>
< a href =link2.aspxtabindex =0class =someclass3>
< span class =someclass2>
< span class =menu-item-text> Link2< / span>
< / span>
< / a>
< ul class =static>
< li class =static>
< a href =Link2A.phptabindex =0class =someclass1>
< span class =someclass2>
< span class =menu-item-text> Link2A< / span>
< / span>
< / a>
< / li>
< li class =static>
< a href =Link2B.phptabindex =0class =someclass1>
< span class =someclass2>
< span class =menu-item-text> Link2B< / span>
< / span>
< / a>
< / li>
< / ul>
< / li>
< li class =static>
< a href =Link3.phptabindex =0class =someclass1>
< span class =someclass2>
< span class =menu-item-text> Link3< / span>
< / span>
< / a>
< / li>
< / ul>
< / div>
< / div>
< / div>
在您的特定代码中，使用 this 来引用被点击的元素，然后从那里找到父元素< li> 仅在< li> 中进行操作：
<$ c $（this）.closest（li）。click（function（）{
if（$（this））.closest（li）。children（ ul）。length）{
//点击< li>有一个< ul>作为直接子
}
}）;
在jQuery中，您可以使用 或者，如果ul可以是任何后代，那么您可以使用它： 如果您想查找所有 您可以获得所有<$ c $的列表c>< li> .find（ul）或 .children（ul）取决于您是仅查找直系后代还是例如，如果你想知道某个特定的< li> 标记了你已经有一个< ul> 作为直接孩子的引用，那么你可以这样做：
<$ p如果（$（el）.children（ul）.length）{
// el有一个ul作为直接后裔
}
/ code> 标签，其中包含
if（$（el）.find（ul）。length）{
// el在任何级别都有一个ul作为后代
}
< li> 标签，其中< ul> 下面有这两个选项：
< ul> 这样的内容：
var tags = $（li）。filter（function（）{
return $（this）.find（ul）。length！= = 0;
}）;
如果您只需要立即的后代，您可以使用这个：
var tags = $（li）。filter（function（）{
return $（this）.children（ul）。 == 0;
}）;
然后，您可以对这些特定的<$ c如果没有使用，只调用jQuery对象的一个方法即可：$ c>< li> ：
var tags = $（li> ul）。addClass（hasSubMenu）;
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:
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.
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>
In your specific code, it looks like you need to use this to 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:
$('#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.
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:
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:
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:
You can get a list of all <li> tags with a <ul> anywhere inside of it like this:
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:
var tags = $("li > ul").addClass("hasSubMenu");
这篇关于如何找到LI是否有孩子UL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
