jQuery how to add class to specific div's

Question

Is there a way to add a class through jquery to all divs containing ul's with only one list element (like div.filter_7). With jQuery i need to go through every div.list-container and count the list elements. If the list elements are lower than 2 then jquery should append a class.

<div class="filter_group">
<div class="filter-holder filter_1">
<h4>Test</h4>
<div class="list-container">
    <ul class="list filter">
        <li class="list_id1">list_id1</li>
        <li class="list_id2">list_id2</li>
        <li class="list_id3">list_id3</li>
        <li class="list_id4">list_id4</li>
        <li class="list_id5">list_id5</li>
    </ul>
</div>
</div>
<div class="filter-holder filter_2">
<h4>Test</h4>
<div class="list-container">
    <ul class="list filter">
        <li class="list_id11">list_id11</li>
        <li class="list_id22">list_id22</li>
        <li class="list_id33">list_id33</li>
        <li class="list_id44">list_id44</li>
        <li class="list_id55">list_id55</li>
    </ul>
</div>
</div>
<div class="filter-holder filter_6">
<h4>Test</h4>
<div class="list-container">
    <ul class="list filter">
        <li class="list_id111">list_id111</li>
        <li class="list_id222">list_id222</li>
        <li class="list_id555">list_id555</li>
    </ul>
</div>
</div>
<div class="filter-holder filter_7">
<h4>Test</h4>
<div class="list-container">
    <ul class="list filter">
        <li class="list_id1111">list_id1111</li>
        <li class="list_id2221">list_id2222</li>
    </ul>
</div>
</div>

​

Here is what i've done so far with jquery, but it seems wrong:

    var total = 0;
$(document).ready(function() {
    $('.list-container').each(function(idx, item){
      total = $(".list-container>ul").size();
          if (6 >= total) {
           $('.list-container').parent('div').addClass('noshow');
    } else {
    alert(total);
    }              
    });
});

​

Solution 1

You don't need to filter or each...

You can use jQuery.has() in conjunction with :only-child. As can be seen in this jsFiddle demo and code below.

jQuery("div.list-container").has("li:only-child").addClass("noshow");

It's WAY cleaner to read than using filter. You can modify the has a bit to make it more specific.

Solution 2

Hard to work out exactly what you want as your text doesn't really match your html or example JS at all but try this:

$('div.filter-holder').filter(function() {
    return $(this).find('li').length == 1;
}).addClass('noshow');

Example - http://jsfiddle.net/infernalbadger/hyCaJ/

Solution 3

$('div.filter-holder').filter(function(){
  return $('div.list-container li',this).length <= 2;
}).addClass('noshow');

You can use .filter() to apply more advanced logic to a result set (returning true keeps the element in the set, while returning false removes it from the set.

Fiddle example: http://jsfiddle.net/pMvHu/1/

Comments

[NeeL]

jquery size() and length are the same :)

[Brad Christie]

Just caught you were trying to apply the class to the parent div (.filter-holder), not the list container (.list-container). Code updated.