html 子元素不为空时隐藏元素

tag5nh1u 于 2023-02-27 发布在其他

关注(0)|答案(2)|浏览(152)

我需要在div的子元素为空时隐藏div，特别是，如果子元素为空，我需要添加class .no-content。
我有这样的代码与空格：

<div class="ee-posts-list">       
<div class="ee-post ">                    </div>
<div class="ee-post ">                    </div>
<div class="ee-post ">                    </div>
<div class="ee-post ">                    </div>
</div>

如果div没有文本，我还需要添加一个类：

<div class="ee-posts-list">       
<div class="ee-post no-content">                    </div>
<div class="ee-post no-content">                    </div>
<div class="ee-post no-content">                    </div>
<div class="ee-post no-content">                    </div>
</div>

我有一个类似的问题需要解决，为此，我使用以下脚本：

<script>
document.querySelectorAll('.ee-post').forEach(post => {
  if (!post.querySelector('.breakdance').hasChildNodes()) {
    post.classList.add('no-content');
  }
});
</script>

Html

来源：https://stackoverflow.com/questions/75536129/hide-element-when-child-is-not-empty

2条答案

按热度按时间

pprl5pva1#

使用.innerHTML.trim()。这将得到去掉了周围空白的内容，所以对于示例中的空白div，它将为空。

document.querySelectorAll('.ee-post').forEach(post => {
  if (post.querySelector('.breakdance').innerHTML.trim() == '') {
    post.classList.add('no-content');
  }
});

赞(0）回复(0）举报 2023-02-27

zujrkrfu2#

这段代码使用ee-post类迭代所有元素，并向任何没有内容的元素添加一个no-content类：

document.querySelectorAll('.ee-post').forEach(function(element) {
    if (element.innerHTML.trim() === '') {
        element.classList.add('no-content');
        console.log("class added");
    }
});

https://codepen.io/proudhon/pen/OJoNdQd

赞(0）回复(0）举报 2023-02-27

我来回答

html 子元素不为空时隐藏元素

2条答案

相关问题

热门标签

最新问答