indexOf a jQuery object always returns -1

Question

I am using jQuery and want to store a list of hovered elements in an array. The code I am using is below (you can paste it into an empty html document to test it):

<div class="element" style="width:100px;height:100px;border:1px solid black;"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var hovered = [];
$(document).ready(function(){
    $(".element").hover(function(){
        hovered.push($(this));
        console.log(hovered.indexOf($(this)));
    });
});
</script>

Whenever I hover over the div, -1 always gets logged to the console. Why is this and what is a potential workaround?

Because `{} === {} // false` two objects are never equal to one another. — Kevin B, May 03 '17 at 17:57
You are constructing two different objects. the one you push and the one you look for. — elad.chen, May 03 '17 at 17:58

quirimmo · Accepted Answer · 2017-05-03T18:00:22.640

0

Change it to

hovered.push(this)

and

hovered.indexOf(this)

edited May 03 '17 at 18:00

answered May 03 '17 at 17:58

quirimmo

9,800
3
30
45

How is that a good solution? He should just use 'this' OR keep a reference to the created jQuery object, push it, and use it in the lookup. – elad.chen May 03 '17 at 17:59
yeah sure he can use just the this and keep the dom element – quirimmo May 03 '17 at 18:00

score -1 · Answer 2 · answered May 03 '17 at 18:03

You are creating two distinct jQuery objects, The one you push, and the one you pass to indexOf(..)

Change your code as follows:

$(document).ready(function(){
    $(".element").hover(function() {
        var $this = $( this );

        hovered.push( $this );

        console.log( hovered.indexOf( $this ) );
    });
});

indexOf a jQuery object always returns -1

2 Answers2