How to assign specific class according to number of elements using jQuery
<p>I've this markup as</p>

<pre><code>&lt;div id="one" class="content"&gt;
    &lt;a href="#"&gt;a&lt;/a&gt;
    &lt;a href="#"&gt;b&lt;/a&gt;
    &lt;a href="#"&gt;c&lt;/a&gt;
&lt;/div&gt;
&lt;div id="two" class="content"&gt;
    &lt;a href="#"&gt;d&lt;/a&gt;
    &lt;a href="#"&gt;e/a&gt;
&lt;/div&gt;
&lt;div id="three" class="content"&gt;
    &lt;a href="#"&gt;f&lt;/a&gt;
&lt;/div&gt;
</code></pre>

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

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

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

<pre><code>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');
}
</code></pre>
