Iterating through a jQuery object array

Question

I know this has been asked and answered a couple times already, but I'm still confused about how to reference the current object when iterating over a jQuery array. For example, the following code gives me the error TypeError: genH3Array[i].next is not a function . What is the right way to reference the current array object?

var genH3Array = $('#Generation_II').parent();
    genH3Array.push($('#Generation_III').parent());;
    genH3Array.push($('#Generation_IV').parent())

$.each(genH3Array, function(i, value)
        {
            if(genH3Array[i].next().attr("align") == "center")
            {                   genH3Array[i].next().next().next().insertBefore(heading.next())
            }
            genH3Array[i].next().next().insertBefore(heading.next())
            genH3Array[i].next().insertBefore(heading.next())
        })

EDIT: Thanks for all your help, everyone. I know this was probably a cinch for most of you, but it was a major headache for me. The corrected code is below:

var genH3Array = $('#Generation_II,#Generation_III,#Generation_IV').parent();

        $.each(genH3Array, function(i, value)
        {
            console.log($(this).next());

            if($(this).next().attr("align") == "center")
            {
                $(this).next().next().next().insertBefore(pokemonHeader.next())
            }
            $(this).next().next().insertBefore(pokemonHeader.next())
            $(this).next().insertBefore(pokemonHeader.next())
            $(this).insertBefore(pokemonHeader.next())
        })

Answer 1

This part:

var genH3Array = $('#Generation_II').parent();
    genH3Array.push($('#Generation_III').parent());
    genH3Array.push($('#Generation_IV').parent());

...isn't really the way to use .push() against a jQuery object. When you .push() a value in, it should be a DOM element. Not a jQuery object.

You could simplify that entire bit like this:

var genH3Array = $('#Generation_II,#Generation_III,#Generation_IV').parent();

Now you'll have the .parent() of all three in the object.

Not entirely sure what the each is supposed to do, but it seems like you're trying to take the next three elements of each one, and insert them after some heading element.

$.each(genH3Array, function(i, value) {
        if($(this).next().attr("align") == "center") {                    
            heading.after( $(this).nextUntil('sometarget:last') );
        }
        heading.after( $(this).nextUntil('sometarget') );
    });

I really don't know if this is what you want. It's a little hard to tell.

Answer 2

Both value and this point to the current item in the iteration, but that isn't your problem. Your problem is that the item returned by [] on a jQuery object isn't a jQuery object. You could do this:

$(genH3Array[i]).next() 

Answer 3

Adding to what @patrick dw said: once you get the right selector, you can use the following syntax:

var getH3Array = ('#Generation_II,#Generation_III,#Generation_IV').parent().each(function() {
    $(this); // this references the dom element matched, so:

    if($(this).next().attr("align") == "center") {
         // do something here
    }
});

Answer 4

I think what you want is

var array = $("#c1, #c2, #c3").parent();
$.each(array, function(){
    console.log($(this).next());
});

In $.each callback, the this variable point to the current element. If you are iterating through a jquery array like what you have, it will be iterating through the dom elements not jQuery objects, so you need to get the jQuery objects corresponding to them by using $(this) .

jQuery.each