How can I successfully loop through an array of classes in JQuery?

Question

I'm trying to pass an array of classes holding a comment each into a function that will display all the comments in a list. The purpose of the function is to make the list drop down down with an animated feel to it. Slightly different to use .slideDown and very similar to google+'s way of showing all comments of a post.

Here is a JSFiddle link from one of my other questions. This what I'm trying to do:

http://jsfiddle.net/MZzUr/9/

Here is my attempt to do the same thing but using an array of classes holding the comments instead of a for loop:

http://jsfiddle.net/A9WLc/4/

Don't intend to give up on this.. been at it for days now. Thanks in advance. Kind regards

Answer 1

When you use items[0] it returns the DOM node, not a jQuery object. It is equivalent of using .get(index) . You want to use .eq(index) which returns the jQuery object.

var myItem = items.eq(0);
var height = myItem.height();
myItem.hide();

Answer 2

I think I know what you are going for. This isn't exactly it but it might be useful: http://jsfiddle.net/xkfqN/19/

I have tried to recreate how google does their animation for a social network I worked on but gave up and just went with the way facebook does it...it just pops :) I don't know what kind of voodoo magic google does but it is really hard to replicate.