Count the <a> tags inside div + childs

Question

I have a problem regarding to jQuery. I need to count the amount of <a> tags within a div. Now this can easilly be done by using $('.classOfDiv > a').size();. But I need to count the a's within a couple of childs of classOfDiv.

Ex.

<div class="classOfDiv">
    <div class="div1">
        <a href="" class="link">Link</a>
        <a href="" class="link">Link</a>
        <a href="" class="link">Link</a>
    </div>
    <div class="div2">
        <a href="" class="link">Link</a>
        <a href="" class="link">Link</a>
        <a href="" class="link">Link</a>
    </div>
    <div class="div3">
        <a href="" class="link">Link</a>
        <a href="" class="link">Link</a>
        <a href="" class="link">Link</a>
    </div>
    <div class="div4">
        <a href="" class="link">Link</a>
        <a href="" class="link">Link</a>
        <a href="" class="link">Link</a>
    </div>
</div>

$('.classOfDiv > a').size(); With the result of 12

Can this be done?

Thanks in advance!

Answer 1

Just remove the > from the selector in order to get all a descendants of .classDiv, not just the direct ones:

$(".classOfDiv a").length

Answer 2

The .classOfDiv > a selector will only get you the <a> tags which are direct descendants of a <div class="classOfDiv">, so you'll need to change your code to:

$('.classOfDiv a').length;

Notice the lack of > direct descendant selector.