Question

I’ve this markup as

<div id="one" class="content">
    <a href="#">a</a>
    <a href="#">b</a>
    <a href="#">c</a>
</div>
<div id="two" class="content">
    <a href="#">d</a>
    <a href="#">e/a>
</div>
<div id="three" class="content">
    <a href="#">f</a>
</div>

Is there a way in which according to the number of a elements in each div.content, I can assign a different class to the div.content element.

For example, in div#one, I’ve 3 a elements, so I’ll do $('div#one').addClass('three-img'); in div#two, I’ve 2 a elements, so I’ll do $('div#two').addClass('two-img') while in div#three, I’ve only 1 a element, so I’ll do $('div#three').addClass('one-img').

The following jQuery codes work for only div#one. What I want is a generic code which will be applied to every div.content in the page (there could be unknown number of div.content elements having either 1 or 2 or 3 a elements inside it.

if($('#one a').length == 3){
    $('#one a').parent().addClass('three-img');
} else if($('#one a').length == 2){
    $('#one a').parent().addClass('two-img');
} else if($('#one a').length == 1){
    $('#one a').parent().addClass('one-img');
}

Answer 1

I would go for something like this:

var classes = { 1: 'one-img', 2: 'two-img', 3: 'three-img' };

$('div.content').each( function() {
  var content = $(this);
  content.addClass( classes[content.children().length] );
});

Check a test here