Question

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.

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?

Here is my 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

     if ($('div.bullet-btn').children('.icon-thumbs-down').length > 0) {
    $(this).find(".badge").css({'color':'red'});
} else {
    $(this).find(".badge").css({'color':'white'});
}

Answer 1

$('.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/