How can I get an array of all elements within a specific class using javascript and/or jQuery?

Question

Hi,

I'm trying to get an array of all elements with the class "sampleclass". For example, withing my document I have three divs:

<div class="aclass"></div>
<div class="sampleclass"></div>
<div class="anotheraclass"></div>
<div class="sampleclass"></div>

I want to get an array with all elements that are within the "sampleclass" using javascipt and/or jQuery.

Any ideas on how to do this?

Answer 1

$( '.sampleclass' );

You can then iterate through the array with each.

Answer 2

......

$('.sampleclass').........

Further you can iterate over it using each like this:

$('.sampleclass').each(function(){
  // more code........
})

And finally, you can get each individual item like this too:

$('.sampleclass')[0]; // first
$('.sampleclass')[1]; // second
// and so on........

Answer 3

Expanding Jacob Relkin' answer:

$('.sampleClass').each(function()
{
   // do something with it...
   $(this).css('background-color', 'green');
});

Answer 4

This will get all the elements inside each element containing the sampleclass class:

var myArray = $('.sampleclass *');

* is called the All selector

EDIT: please note, in this example:

<div id="test">
   <table>
      <tr><td>TEST</td></tr>
   </table>
</div>

var myArray = $('#test *');

myArray contains all the sub-elements of the div: table, tr and td.

If you want all the top-level elements inside a given element, you can try:

var myArray = $('#test > *');

This combines the child selector with the aforementioned all selector.