jQuery: select element from array

Question

I'm working with this function, but it doesn't work correctly: only the last element works.

Here is my JavaScript code:

function hover_action() {

    var array = ["elem1","elem2","elem3","elem4"];

    $(array).each(function( index, value ) { 
        value1 = "#box-" + value + " img";
        value2 = "div#name-" + value;
        $(value1).hover(function(){
            $(value2).fadeIn(300);
        }, function(){
            $(value2).fadeOut(300);
        });
    });
}

Her is my HTML code:

<div>
    <div id="box-elem1"><img src="path1" /></div>
    <div id="name-elem1"><span>NAME 1</span><div>
</div>
<div>
    <div id="box-elem2"><img src="path2" /></div>
    <div id="name-elem2"><span>NAME 2</span><div>
</div>
<div>
    <div id="box-elem3"><img src="path3" /></div>
    <div id="name-elem3"><span>NAME 3</span><div>
</div>
.
.
.

Thanks for your help.

not a good idea to bind event in a loop which is called in a function. — Jai
– Jai, Commented May 25, 2016 at 10:02
There is no way for us to asses why it's not working without some relevant html — charlietfl
– charlietfl, Commented May 25, 2016 at 10:17
You are defining value2 (and value1 btw but doesn't really matter here) as global, that's why. Use var statement: var value2 = "div#name-" + value; — A. Wolff
– A. Wolff, Commented May 25, 2016 at 10:21

madalinivascu · Accepted Answer · 2016-05-25 10:32:46Z

2

Try something similar:

$('div[id^="box-"]').hover(function(){
            $(this).next('div[id^="name-"]').fadeIn(300);//asuming the next element is the element you want to hover
        }, function(){
            $(this).next('div[id^="name-"]').fadeOut(300);
        });

And for god's sake use classes

demo

edited May 25, 2016 at 10:32

answered May 25, 2016 at 10:08

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jai · Accepted Answer · 2016-05-25 10:10:52Z

1

I would suggest you this:

var $els = $("#elem1, #elem2, #elem3, #elem4");

$els.hover(function() {
  $("div#name-" + this.id).fadeIn(300);
}, function() {
  $("div#name-" + this.id).fadeOut(300);
});

answered May 25, 2016 at 10:10

Jai

74.8k12 gold badges76 silver badges104 bronze badges

Comments

Jim LK Yu · Accepted Answer · 2021-09-17 13:59:19Z

0

the correct solution was by Izumi, but his/her answer has disappeared from this thread (?)

function hover_action() {

    var array = ["elem1","elem2","elem3","elem4"];

    $.each(array,function( index, value ) { 
        value1 = "#box-" + value + " img";
        value2 = "div#name-" + value;
        $(value1).hover(function(){
            $(value2).fadeIn(300);
        }, function(){
            $(value2).fadeOut(300);
        });
    });
}

thanks to Izumi...

The reason why OP code is not working is because of wrong use of selector. In JQuery, $() is element selector which aim at DOM object. array is javascript variable so it is not working. $.each is the correct way to iterate through javascript variable.

Reference from JQuery: jQuery.each()

edited Sep 17, 2021 at 13:59

Jim LK Yu

17812 bronze badges

answered May 25, 2016 at 10:44

kaqu

871 silver badge7 bronze badges

Collectives™ on Stack Overflow

jQuery: select element from array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related