javascript - 如果一个列表项没有内容或为空，则隐藏多个列表项

Question

我有一大堆列表项，其中还有更多列表项。

对于所有<li id="company-name" class="hide"> , 我想检测这个元素是否为空。

如果为空，我想隐藏所有<li class="hide">在直接父级内 <ul></ul>元素。

<ul>
    <li>
        <ul class="greyul">
            <li>Location:</li>
            <li class="hide">Company:</li> <!-- DONT HIDE -->
        </ul>
        <ul class="whiteul">
            <li>Melbourne</li>
            <li id="company-name" class="hide"></li> <!-- HIDE -->
            <li class="hide">Sydney</li> <!-- HIDE ALSO-->
        </ul>
    </li>
</ul>

Answer 1

您可以使用简单的 css 选择器 :empty

.hide:empty{
    display: none;
}

使用 jQuery:

$('.hide:empty').hide();

如果你想隐藏父div，那么你可以使用:

$('.hide:empty').parent().hide();

---

根据您更新的问题，您可以使用 not selector和 contains selector像这样:

$('.hide:not(:contains("Company:"))').hide();