使用jQuery檢查li元素是否具有帶值的子代

Question

我需要檢查每個li元素是否具有任何值或不使用jQuery。 我在下面提供我的代碼。

 $("#navbarNavDropdown ul a").each(function() { if ($(this).find('li').has("ul").length) { alert('Yeah, we have a ul ' + $(this).text()); } else { alert('Yeah, we dont have a ul ' + $(this).text()); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul> <li><a href="#">Level 1</a> <ul> <li><a href="#">Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a> <ul class="dropdown-menu s-drop"> <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-drop pstatic"> <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a> </li> </ul> </div> 

我的要求是：假設在循環中，第一個li元素具有一些children（ ul ）值，我想在此處打印文本，而第二個li元素沒有任何child（ ul ），因此它將位於其他部分下。 如果還要檢查submenu(ie-Level 2)是否具有ul值。 我的代碼無法正常工作。

Answer 1

此代碼可以正常工作。

 $("#navbarNavDropdown ul a").each(function() { if ($(this).closest('li').has("ul").length) { alert('Yeah, we have a ul ' + $(this).text()); } else { alert('Yeah, we dont have a ul ' + $(this).text()); $(this).find('span').remove(); //to remove the span } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul> <li><a href="#">Level 1</a> <ul> <li><a href="#">Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a> <ul class="dropdown-menu s-drop"> <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-drop pstatic"> <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a> </li> </ul> </div> 

但按照我的說法，有一段更好的代碼可以滿足您的要求

 $("#navbarNavDropdown > ul > li").each(function() { if ($(this).has("ul").length) { alert('Yeah, we have a ul ' + $(this).text()); } else { alert('Yeah, we dont have a ul ' + $(this).text()); $(this).find('span').remove(); //to remove the span } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul> <li><a href="#">Level 1</a> <ul> <li><a href="#">Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a> <ul class="dropdown-menu s-drop"> <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-drop pstatic"> <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a> </li> </ul> </div> 

我已經將#navbarNavDropdown ul a更改為#navbarNavDropdown>ul>li因此它只會循環2次[節省時間，並且僅循環刪除span第一級元素] ，根據您的評論，我認為這是您正在查找的代碼對於。

我希望這可以解決您的錯誤。

Answer 2

這樣可以解決您的問題。

 $("#navbarNavDropdown ul li").each(function() { if ($(this).find("ul").length) { alert('Yeah, we have a ul ' + $(this).text()); } else { alert('No, we dont have a ul ' + $(this).text()); $(this).find('span').remove(); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul> <li><a href="#">Level 1</a> <ul> <li><a href="#">Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a> <ul class="dropdown-menu s-drop"> <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-drop pstatic"> <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a> </li> </ul> </div> 

Answer 3

<a>元素沒有任何子<ul>或<li>元素。 一個<ul>是兄弟姐妹而不是孩子。

如果您是小孩子，則需要更改html，以使結束</a>在結束</ul> 。 請注意，盡管由於您有子元素<a>您無法將整個內容包裝在錨點中，因為這是無效的html，並且瀏覽器將不會創建這樣的結構。

您需要將行更改為可檢查兄弟姐妹的內容，例如：

$(this).next('ul').find('li ul').length
//Or go back up to the parent element and then go searching back down
$(this).parent().find('li ul').length

Answer 4

ul不在元素內，因此$(this).find('li').has("ul")無法正常工作。

使用$(this).next()獲取ul元素。

Answer 5

替代。

 $("#navbarNavDropdown ul").each(function() { $.each(this.children, function(index, element) { const text = element.innerText.split('\\n').reverse()[0]; if (element.localName === 'li' && $(element).has('ul').length > 0) { alert('Yeah, we have a ul ' + text); } else { alert('Yeah, we dont have a ul ' + text); $(element).find('span').remove(); } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul> <li><a href="#">Level 1</a> <ul> <li><a href="#">Level 2<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a> <ul class="dropdown-menu s-drop"> <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-drop pstatic"> <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a> </li> </ul> </div>