jquery - count divs with ids in an array?

Question

Not sure how to do this with jquery, but I'm trying to return a count of the number of divs that have specific classes...

<div id="main">
<div class="contact">Data</div>
<div class="margin">Margin</div>
<div class="contact">Data</div>
<div class="break">Break</div>
<div class="break">Breaker</div>
<div class="nap">Nap</div>
</div>

And, I want to return a count of divs with a class of contact, break, and nap, so that the count returns: 5... In reality, there will be about 30 classes, and I'd rather not have to write out an if statement for each one... So, hopefully there's a way to build an array and just check to see if the class is in the array?

Answer 1

var count = $("div.contact, div.break, div.nap", "#main").length;

As stated in the comments, if you need this to be based off of an array:

var classes = ["div.contact", "div.break", "div.nap"];
var count   = $(classes.join(", "), "#main").length;

Answer 2

if it's important to use an array:

var classes = ['contact', 'break', 'nap'];
//...
var count = 0;
$.each(classes, function(i, c) { count += $('div.' + c, '#main').length; });
alert(count);

Answer 3

strong text***

`

-

---

---

`

---

Answer 4

Jonathan Sampson has the best answer, though instead of:

var count = $("div.contact, div.break, div.nap", "#main").length;

I would do this:

for each div you want in the array, add a grouping class:

<div id="main">
    <div class="contact grouped">Data</div>
    <div class="margin">Margin</div>
    <div class="contact grouped">Data</div>
    <div class="break grouped">Break</div>
    <div class="break grouped">Breaker</div>
    <div class="nap grouped">Nap</div>
</div>

Then use this js.

var count = $("#main .grouped").length;

This way, you can add or remove elements in only one place and gives you more control over exceptions and which elements are in the group.