循环遍历父元素，如果子元素不存在则显示文本答案

【问题标题】：Loop through parent elements and if child element doesnt exist display text循环遍历父元素，如果子元素不存在则显示文本
【发布时间】：2014-08-01 01:16:37
【问题描述】：

我试图弄清楚如何循环遍历所有父类（.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>

【问题讨论】：

标签： jquery html css

【解决方案1】：

这样的事情应该可以工作：

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

【讨论】：

【解决方案2】：

另一种选择，一次调用：

$('.grid')
    .filter(function fi(){return !$('.image-container', this).length})
    .children('.content-container')
    .show();

http://jsfiddle.net/E8CfL/

或者：

$('.grid')
    .filter(':not(:has(.image-container))')
    .children('.content-container')
    .show();

http://jsfiddle.net/E8CfL/1

或者：

$('.grid:not(:has(.image-container)) .content-container').show();

http://jsfiddle.net/E8CfL/3

不确定哪个效率最高，但我有预感会是第一个。

【讨论】：