Как найти, если у LI есть дети UL
У меня есть следующая структура:
<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. Я просто хочу выполнить некоторую операцию, когда пользователь нажимает на какой-либо LI, который содержит дочерний 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>
Ответы
Ответ 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
}
Или, если 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;
});
Затем вы можете работать с этими тегами <li>
, просто вызвав метод для объекта jQuery, не используя if
:
var tags = $("li > ul").addClass("hasSubMenu");
Ответ 2
Это то, что вы ищете
$('li:has(> ul)');
Js Fiddle Demo
Ответ 3
используйте : есть селектор
like
$('#DeltaPlaceHolderLeftNavBar div > div > ul > li > a').click(function () {
if ($(this).closest('li').has('ul').length) {
alert("yes");
} else {
alert("no");
}
});
Ответ 4
Вы можете попробовать это для прямых детей под вашими ликами:
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)
Ответ 5
Вы также можете использовать длину
if($('li.static').children('ul').length > 0) {
//do something...
}
Ответ 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>
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');
}
});
скрипт: https://jsfiddle.net/1fykp7wx/