jQuery - effect elements taken from an array (individually)

Question

This is my HTML:

<div class="objectA"></div>
<div class="objectB"></div>
<div class="objectA"></div>
<div class="objectB"></div>

When i use this script nothing happens:

var allObjects = $("div[class^=object]");
allObjects[1].fadeIn();

But when i use this script, the alert message will be 4, and it will fade all the elements:

var allObjects = $("div[class^=object]");
    allObjects.fadeIn();
    alert(allObjects.lenght);

so i know i got the elements i wanted into an array, but how can i effect each 1 individually?

Answer 1

allObjects[1] returns a raw DOM element. DOM elements do not have a fadeIn method, jquery objects do. Instead, use .eq:

allObjects.eq(1).fadeIn();

.eq return a jquery object containing the nth element.

Answer 2

You can loop over each element individually with jQuery.each(). See documentation.

Answer 3

Check this fiddle

$(document).ready(function(){
    var allObjects = $("div[class^='object']");
    $(allObjects[1]).fadeIn();
})