Question

我有一个包含2个项目的列表 - 一个有图像，一个没有

<ul class="listings news">
    <li>
        <div class="image">
            <a href="/"><img src="images/temp/inner1.jpg" alt=""></a>
        </div>
        <div class="content">
            <h3><a href="/">Sub-section title link</a></h3>
            <p>Text content</p>
        </div>
    </li>
    <li>
        <div class="content">
            <h3><a href="/">Sub-section title link</a></h3>
            <p>Text content</p>
        </div>
    </li>
</ul>

我想找到没有图像的那个，并为LI或'content'Div添加一个类 - 到目前为止，它找到它但是将类添加到所有LI div而不是jsut没有图像的那个：

if ($(".news li").find(".image").length > 0){
    $(".content").addClass("no-thumb");
}

已经尝试了很多变化，使用'has'功能等但没有快乐 - 任何帮助赞赏

干杯 .ben。

Answer 1

尝试：

$(function () {
    $(".news li").each(function () {
        $(this).find('.image').parent().addClass("no-thumb");
    });
});

Jsfiddle

问题是$(".news li")会从您的新闻容器中返回所有li（如果您至少有一个$(".news li").find(".image").length > 0，则false总是$(".content").addClass("no-thumb");但是您希望遍历每个个别项目。

另外，您应该知道content将类设置为每个元素{。}}类。

Answer 2

您可以对具有新闻类的元素的所有li子元素进行迭代，并检查它是否具有类图像的子元素添加 no-thumb 类，其子元素具有类内容

你可以这样做：

＆＃13;

$(".news li").each(function () {
    
    if ($(this).find(".image").length == 0) {  // check if div with class image not exists
        $(this).find(".content").addClass("no-thumb"); // add class to content div
    }

});

＆＃13;

.no-thumb {
    background-color:red;
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul class="listings news">
    <li>
        <div class="image"> <a href="/"><img src="images/temp/inner1.jpg" alt=""></a>

        </div>
        <div class="content">
             <h3><a href="/">Sub-section title link</a></h3>

            <p>Text content</p>
        </div>
    </li>
    <li>
        <div class="content">
             <h3><a href="/">Sub-section title link</a></h3>

            <p>Text content</p>
        </div>
    </li>
</ul>

＆＃13;

Answer 3

避免显式循环的另一个解决方案是使用jQuery＆＃39; s：选择器。

$(".news li:not(:has(.image))").find('.content').addClass("no-thumb");

Link to jsFiddle

Answer 4

$(".news li").each(function(){
    if($(this).find(".image").length < 1){
       $(".content",this).addClass("no-thumb");
    }
});

fiddle

Answer 5

您可以使用以下代码获取不包含li元素的所有.image元素，并将no-thumb类添加到li元素。

$("li").not($("li").has(".image")).addClass("no-thumb")

编辑：以下是演示此代码的小提琴：

http://jsfiddle.net/jwnace/ryqyr2p3/

检查div的列表项，如果没有内容则添加类

5 个答案: