如果其中的所有列表项都相等，我如何隐藏 div？

Question

我有从内容管理系统中提取的数据，这些数据显示在无序列表中。有 3 个。 <ul> 坐在有 class 植物的 <div> 里面。页面上有多个 div 和 class="plant"。在阅读 javascript 之后，由于浏览器支持等原因，我决定 jquery 是可行的方法。如果数据库中没有数据，那么 CMS 只会将   放入列表项。

我想实现以下目标：如果 div 中的所有列表项都是  ，则隐藏 div。否则只隐藏其中包含内容的列表项。

我已经设法用   隐藏了列表项，就像这样（感谢 Whosebug 上的另一个问题）：

$('li').filter(function() {
    return $.trim($(this).text()) === '' && $(this).children().length == 0
})
.remove()

但是事实证明，如果所有的 li 都是  ，那么隐藏 div 就更加困难了。

这是我的 html:

<!DOCTYPE html>
<HTML>
<head>
<style type="text/css">
.plant {
border:1px solid red;
}
</style>
</head>
<body>
<div class="plant">
<h3>Header 1</h3>
<ul class="attPlant">
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
</ul>
<h3>Header 2</h3>
<ul class="nonAttPlant">
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
</ul>
<h3>Header 3</h3>
<ul class="attPlant">
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
</ul>
</div>
<div class="plant">
<h3>Header 1</h3>
<ul class="attPlant">
    <li class="item">TEST</li>
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
</ul>
<h3>Header 2</h3>
<ul class="nonAttPlant">
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
</ul>
<h3>Header 3</h3>
<ul class="attPlant">
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
    <li class="item">&nbsp;</li>
</ul>
</div>

<script src="jquery-1.7.js"></script>
</body>
<html>

这是我目前的 Jquery：

$('.plant').each(function() {
var $this = $(this),
    $items = $this.children.children('.item');

        $items.each(function() {
            var x = true,
            $that = $(this).text();
                if ($that == '&nbsp;') {
                } else {
                    x = false;
                    break;
                }   
        });
        if (x = true) {
            $this.hide();
        }
});

我是 jquery 的新手，所以上面的代码可能错得离谱。我认为对于每个 <div> 我需要将所有列表项放入一个变量中，然后遍历它们并检查它们是否等于  。如果他们不这样做，则隐藏 <div>。它目前的形式无法正常工作，但我对 jquery 的了解还不够，无法找出原因。

我搜索了一下，虽然有很多关于隐藏 div 的问题，但它们都与我的场景不同。

有人可以帮忙吗？

Answer 1

我建议简单地在一个过滤器中进行过滤：

// selecting the div.plant elements, and filtering the collection:
$('div.plant').filter(function (){
    // caching the <li> descendants:
    var lis = $(this).find('li');

    // if the number of <li> descendants is equal to the number
    // of <li> elements whose trimmed text is equal to an
    // empty string:
    return lis.length === lis.filter(function(){
             return $.trim($(this).text()) === '';
           }).length;
// we hide those div.plant elements that are retained by the filter:
}).hide();

虽然，老实说，虽然这可行，但在客户端执行此操作似乎是多余的，如果服务器可以（假设它是动态生成的）简单地防止生成空的 <li> 元素。或者，如果您允许空列表元素（<li></li>，而不是 <li> </li>）而不是使用  ，您可以使用 CSS 选择器作为 [=] 的一部分21=]。这可以采用相同的方法，但更简洁一点：

$('div.plant').filter(function(){
    var lis = $(this).find('li');
    return lis.length === lis.filter(':empty').length;
}).hide();

如果其中的所有列表项都相等，我如何隐藏 div？

How can I hide a div if all of the list items inside it equal  ?

jquery

if-statement

如果其中的所有列表项都相等，我如何隐藏 div？

How can I hide a div if all of the list items inside it equal &nbsp;?

jquery

if-statement

How can I hide a div if all of the list items inside it equal ?