[英]Check if children element exist inside a list of divs and add a class to another element based on that
Wondering if somebody could help me figuring this out, I have a list; 我想知道是否有人可以帮助我解决这个问题,我有一个清单。 basically I want jQuery to check if inside every div with class "bullet-btn" a children element has a class "icon-thumbs-up" if so find another element inside the same div with a class "badge" and change color of it.
基本上我想让jQuery检查是否在每个具有“ bullet-btn”类的div内是否有一个子元素有一个“ icon-thumbs-up”类,如果可以的话,请在同一div内找到一个带有“徽章”类的另一个元素并更改其颜色。
Basically the way I have the script is not filtering the all list and it is selecting all the element with class "icon-thumbs-up" any ideas? 基本上,我拥有脚本的方式不是过滤所有列表,而是选择“ icon-thumbs-up”类的所有元素有什么想法?
Here is my html 这是我的html
<ul class="content-box">
<li>
<div class="bullet-btn">
<h1>Hamburger</h1>
<span class="counter badge">389</span>
<span class="icon-thumbs-up"></span>
</div>
<div class="bullet-btn">
<h1>Sirloin</h1>
<span class="counter badge">389</span>
<span class="icon-thumbs-down"></span>
</div>
<a href="#">View All Trending Topics...</a>
</li>
<li>
<div class="bullet-btn">
<h1>Brett</h1>
<span class="counter badge">389</span>
<span class="icon-thumbs-down"></span>
</div>
<div class="bullet-btn">
<h1>Jenny</h1>
<span class="counter badge">389</span>
<span class="icon-thumbs-up"></span>
</div>
<a href="#">View All Trending Topics...</a>
</li>
<li>
<div class="bullet-btn">
<h1>Lighting</h1>
<span class="counter badge">389</span>
<span class="icon-thumbs-up"></span>
</div>
<div class="bullet-btn">
<h1>Music</h1>
<span class="counter badge">389</span>
<span class="icon-thumbs-down"></span>
</div>
<a href="#">View All Trending Topics...</a>
</li>
</ul>
Here is my jQuery 这是我的jQuery
if ($('div.bullet-btn').children('.icon-thumbs-down').length > 0) {
$(this).find(".badge").css({'color':'red'});
} else {
$(this).find(".badge").css({'color':'white'});
}
$('.bullet-btn').each(function() {
var color = $('.icon-thumbs-down', this).length ? 'red' : 'white';
$('.badge', this).css('color', color);
});
Here's the fiddle: http://jsfiddle.net/PSSWc/ 这是小提琴: http : //jsfiddle.net/PSSWc/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.