javascript - 如果以下元素为空，如何隐藏类中的元素

Question

我有如下 HTML，如果以下 div 为空，我想隐藏类 roles 的元素。

<b class="roles">heading 1</b>
<div>...</div>

<b class="roles">heading 2</b>
<div></div>

在这种情况下，第一个标题应该显示，而第二个标题将被隐藏。我试过的jQuery如下:

$(document).ready(function(){
    $('.roles').next().is(':empty').addClass('hidden');
});

这是我关于 hidden 类的 CSS:

.hidden {
    display: none;
}

感谢您的帮助!

Answer 1

对于多个 .roles，您必须遍历每个元素并检查每个元素的条件。

$('.roles').each(function() {
    if ($(this).next().is(':empty')) {
        $(this).addClass('hidden');
    }
});