CODEWITHSUNDEEP
javascriptjqueryhtmlarraysindexof
Otso Jylhä
Otso Jylhä

Reputation: 11

In my jQuery why indexOf does not find key from my array?

I've been trying to get it work but nothing seems to help.

So I have two images both in pictures array. What I want to do is that when you click previous picture next one appears. I'm pretty sure the problem is with that indexOf because it returns -1 every time.

If I replace line:

pictures[listIndex+1].show("drop", {direction: "up"}, 1000); <---Does not work.

with line:

pictures[1].show("drop", {direction: "up"}, 1000); <---It works but that is not very useful.

I hope you understood what my problem is and sorry for my bad English. I'd really appreciate your help.

$(document).ready(function(){
    var pictures = [$("#link"), $("#italy1")];
    pictures[1].hide();
    $("#link").click(function(){
        var listIndex = pictures.indexOf($(this));
        pictures[listIndex+1].show("drop", {direction: "up"}, 1000);
    });
    $("#italy1").click(function(){
        $(this).hide("drop", {direction: "up"}, 1000);
});
});

Upvotes: 1

Views: 345

Answers (4)

Tom Hartman
Tom Hartman

Reputation: 1203

In support of Guffa, something like this FIDDLE.

$(document).ready(function(){
    var pictures = [$("#link").get(0), $("#italy1").get(0)];

    $(pictures[1]).hide();

    $("#link").on('click', function(){
        var listIndex = $.inArray(this, pictures);
        $(pictures[listIndex+1]).show("drop", {direction: "up"}, 1000);
    });

    $("#italy1").on('click', function(){
        $(this).hide("drop", {direction: "up"}, 1000);
    });
});

Upvotes: 0

Guffa
Guffa

Reputation: 700800

That's because you are wrapping the elements in jQuery object. Even if two jQuery objects contain the same elements, they are still two separate objects, so the indexOf method can't find one by looking for the other.

Put the elements themselves in the array:

var pictures = [$("#link").get(0), $("#italy1").get(0)];

Now you can use an element reference to find the element in the array. Use the $.inArray method, as that also works in browsers that doesn't have the Array.indexOf method:

var listIndex = $.inArray(this, pictures);

Of course, when you get the element from the array, you need to wrap it in a jQuery object to use jQuery methods on it:

$(pictures[listIndex+1]).show("drop", {direction: "up"}, 1000);

Upvotes: 2

Bart Langelaan
Bart Langelaan

Reputation: 529

If you want to select the next $("#link"), you can always use $(this).next("#link").

Upvotes: 0

xsigndll
xsigndll

Reputation: 553

Maybe jQuery.inArray will do the trick.

Upvotes: 0

Related Questions