CODEWITHSUNDEEP
javascriptjquery
sbguy
sbguy

Reputation: 307

Cannot get Array.indexOf method to work in Javascript

I have a fairly large program that I have simplified to show the problem that I am having. I have 2 div's under which I have an image and some text. When I hover on the image, the jQuery hover over image event fires. Through all this, I am able to get the Id's of both the images & their parent div's. However, when I try to get the index value of the Id's in an array, it always returns -1 ie... not found.

Can you please help. The code is enclosed below. I am new to javascript & jQuery and hence the need of some help. Maybe the solution is very trivial.

Thanks in advance. Regards, sbguy

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var input_array = new Array("input1_Id", "input2_Id");
var div_array = new Array("div1_Id", "div2_Id");

window.onload=function(){
    jQuery.ready();
    img_hover_event_handler();
}
//________________________________________________  

function img_hover_event_handler() {
    var input_id = "";
    var div_id = "";
    var input_index, div_index;
    $("input.Lrollover").hover(
        function() {    
            input_id = new String(this.id);
            input_index = new String(input_array.indexOf(div_id));
            div_id = new String($(this).closest('div').attr('id')); // id of the parent div
            div_index = new String(div_array.indexOf(div_id));
            alert(input_id + ", " + input_index + ", " + div_id + ", " + div_index);            
        }, 
        function() {
   });  
}

</script>
</head>

<body>
  <div id="div1_Id">
    <input class="Lrollover" id="input1_Id" type="image" src="images/LGbtn_off.png" alt="Image1" />
    <p id="myp1_Id">"Hello World 1"</p>
  </div>
  <br><br><br>
  <div id="div2_Id">
  <input class="Lrollover" id="input2_Id" type="image" src="images/LGbtn_off.png" alt="Image2"/>
    <p id="myp2_Id">Hello World 2"</p>
  </div>

 </body> 
</html>

Upvotes: 0

Views: 481

Answers (3)

Guffa
Guffa

Reputation: 700800

The Array.indexOf method is not supported in all browsers. There is an inArray method in jQuery to use just for this:

div_index = $.inArray(div_id, div_array);

Upvotes: 1

jb10210
jb10210

Reputation: 1176

An array uses integer based indexing, so your code won't work. As I look at your code I think you need something like this:

var input_div = {
  "input1_Id" : "div1_Id", 
  "input2_Id" : "div2_Id"
};

Now if you want to get the id of a div you can do this:

input_id = new String(this.id);
input_div[input_id] // --> this will return the corresponding div id

Hope it helps!

Upvotes: 0

Richard Dalton
Richard Dalton

Reputation: 35803

Few things wrong. Mainly, you are using div_id instead of input_id when looking up the value from the input_array. Also, you shouldnt be doing new String() everywhere and it's better to create your arrays like this:

var input_array = ["input1_Id", "input2_Id"];

Finally, as you aren't using the 2nd function of hover, it makes more sense to just use mouseover instead.

Working code:

var input_array = ["input1_Id", "input2_Id"];
var div_array = ["div1_Id", "div2_Id"];

function img_hover_event_handler() {
    var input_id = "", div_id = "", input_index, div_index;
    $("input.Lrollover").mouseover(
        function() {    
            input_id = this.id;
            input_index = input_array.indexOf(input_id);
            div_id = $(this).closest('div').attr('id');
            div_index = div_array.indexOf(div_id);
            alert(input_id + ", " + input_index + ", " + div_id + ", " + div_index);            
        });  
}

img_hover_event_handler();

Example - http://jsfiddle.net/dNvXp/

Upvotes: 2

Related Questions