我有一个包含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。
答案 0 :(得分:3)
尝试:
$(function () {
$(".news li").each(function () {
$(this).find('.image').parent().addClass("no-thumb");
});
});
问题是$(".news li")
会从您的新闻容器中返回所有li
(如果您至少有一个$(".news li").find(".image").length > 0
,则false
总是$(".content").addClass("no-thumb");
但是您希望遍历每个个别项目。
另外,您应该知道content
将类设置为每个元素{。}}类。
答案 1 :(得分:0)
您可以对具有新闻类的元素的所有li
子元素进行迭代,并检查它是否具有类图像的子元素添加 no-thumb 类,其子元素具有类内容
你可以这样做:
$(".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;
答案 2 :(得分:0)
避免显式循环的另一个解决方案是使用jQuery&#39; s:选择器。
$(".news li:not(:has(.image))").find('.content').addClass("no-thumb");
答案 3 :(得分:0)
$(".news li").each(function(){
if($(this).find(".image").length < 1){
$(".content",this).addClass("no-thumb");
}
});
答案 4 :(得分:0)
您可以使用以下代码获取不包含li
元素的所有.image
元素,并将no-thumb
类添加到li
元素。
$("li").not($("li").has(".image")).addClass("no-thumb")
编辑:以下是演示此代码的小提琴: