选择所有不包含“ul”的“li”

Select all "li" that do NOT contain a "ul" within

本文关键字：ul li 包含 选择      更新时间：2023-09-26

我正在为产品构建嵌套的下拉导航，我想自动隐藏任何空的类别。

不幸的是，服务器端语言不允许有效的方法来做到这一点，所以我认为我可以直接输出每个类别的产品数量，然后使用 jQuery 删除任何空节点。

我只想针对nav#top_nav内的li：

 <nav id="top_nav">
   <nav class="nav1">
     <ul>
       <li data-num-products="0">
         <a href="...">AAA</a>
         <ul>
            <li data-num-products="3"><a href="...">BBB</a></li>
            <li data-num-products="0"><a href="...">CCC</a></li>
         </ul>
       </li>
       <li data-num-products="7"><a href="">DDD</a></li>
     </ul>
   <nav>
 </nav>

给定 1 级嵌套ul，我想删除任何li......

  • 其中没有嵌套的ul，并且

  • 有data-num-products == 0.

因此，在上面的示例中，保留了AAA，因为它有ul子项，但CCC被删除，因为它没有ul子项，也没有产品。

更新：

它可能需要 2 次删除，因为如果一个 li 包含一个 ul，其 li 元素都被移除了，那么我们也要删除 ul。

$( "#top_nav li").filter( function(){
    return !this.getElementsByTagName("ul").length && !+this.getAttribute("data-num-products");
}).remove();

http://jsfiddle.net/X2D7y/

仅当没有 UL 后代且属性值为 0 时，才会删除此操作

像这样：

$('#top_nav li[data-num-products="0"]:not(:has(ul))').remove();

选择器细分是...

'#top_nav'                // start at element with "top_nav" id
' '                       // and select descendant...
'li'                      // li elements...
'[data-num-products="0"]' //   ...where attribute "data-num-products" is "0"
':not('                   //   ...but exclude li elements that...
  ':has(ul)'              //        ...have descendant ul elements
')'

关于您更新的问题，只需将:not(:has(ul))更改为 :not(:has(li)) .

$('#top_nav li[data-num-products="0"]:not(:has(li))').remove();

http://jsfiddle.net/4YFDd/

$("#top_nav li[data-num-products='0']").filter(function() { 
    return $(this).children("ul").length === 0; 
}).remove();

在 Javascript 中：

var lis = document.querySelectorAll( '#top_nav li[data-num-products="0"]' );
for( var li = 0; li < lis.length; li++ ) { 
    !lis[li].getElementsByTagName( 'ul' ).length && lis[li].parentNode.removeChild( lis[li] );
};

演示：http://jsfiddle.net/ThinkingStiff/2zS9B/

相关文章：