jquery - 遍历父元素，如果子元素不存在则显示文本

Question

我想弄清楚如何遍历所有父类 (.grid)，如果它没有带有类 (.image-container) 的子 div，则在同一个 (.content-container) 中显示 (.content-container)。网格)部分。

HTML:

<style>
.grid .content-container {
    display:none;
}
</style>

<div class="grid">
    <div class="art">
        <div class="image-container">
            <img src="image url" />
        </div>
        </div>
        <div class="title">Title Text</div>
        <div class="content-container">Some Content Goes here</div>
</div>
<div class="grid">
    <div class="art"></div>
        <div class="title">Title Text</div>
        <div class="content-container">Some Content Goes here</div>
</div>
<div class="grid">
    <div class="art">
        <div class="image-container">
            <img src="image url" />
        </div>
        </div>
        <div class="title">Title Text</div>
        <div class="content-container">Some Content Goes here</div>
</div>
<div class="grid">
    <div class="art">
        <div class="image-container">
            <img src="image url" />
        </div>
        </div>
        <div class="title">Title Text</div>
        <div class="content-container">Some Content Goes here</div>
</div>
<div class="grid">
    <div class="art"></div>
        <div class="title">Title Text</div>
        <div class="content-container">Some Content Goes here</div>
</div>

Answer 1

像这样的东西应该可以工作:

$('.grid').each(function() {
    if($(this).find('.image-container').length == 0) {
        // no children
        $(this).find('.content-container').show();
    }
});