Javascript Compare Objects to Elements

Question

In this fiddle, you can see at line 38 in the Javascript that I've attempted to make a comparison that isn't working. I believe it because one of the variables is an Object, where the other is an Element; does anyone have any advice as to how I can can find a match between these two?

menuID[0] = document.getElementById('menuOne'); 
menuID[1] = document.getElementById('menuTwo'); 
menuID[2] = document.getElementById('menuThree'); 
menuID[3] = document.getElementById('menuFour'); 
$('.menu').mouseenter(function () {
  for (var i = 0; i < 3; i++) {
    if(menuID[i] == $(this)){
      //this condition is not met, there's an alert which will add more detail in the fiddle
    }
  }
}

VisioN · Accepted Answer · 2013-12-19 18:53:27Z

4

Method document.getElementById returns a DOM element an not a jQuery object. In the mouseenter event handler this refers to a DOM element as well.

So in order to compare them you shouldn't convert this to a jQuery object:

if (menuID[i] === this) { ... }

answered Dec 19, 2013 at 18:53

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

1 Comment

gen_Eric Over a year ago

I didn't think of that. That's probably better than my answer.

gen_Eric · Accepted Answer · 2013-12-19 18:52:53Z

2

You want to use jQuery's .is() for this.

if($(this).is(menuID[i])){

answered Dec 19, 2013 at 18:52

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

2 Comments

Retsam Over a year ago

Less jQuery, not more is the better answer here. Yes; this will work, but you're basically wrapping and then unwrapping the object, when all you want is the object itself.

gen_Eric Over a year ago

@Retsam: Yeah, I realized that. I'll leave this here anyway.

Retsam · Accepted Answer · 2013-12-19 18:56:57Z

0

A few issues I see here:

One is simply that, in your jsfiddle, the first 4 lines of code that you list aren't running before the bottom block runs. I'm not sure why you have both an init function that you attach to window.onload and a document.ready() function; but you'll want to make sure that init runs.

Secondly; as VisioN said, I think the main issue is that you're trying to compare a jQuery wrapper around a DOM element $(this) with a DOM element (the result of getElementById). As he says, this == menuID[i] will work.

At a design level, why not simply use the id to identify the element? this.id will give you the the id; why not simply use that to determine which menu div you're looking at?

answered Dec 19, 2013 at 18:56

Retsam

33.8k11 gold badges73 silver badges94 bronze badges

Collectives™ on Stack Overflow

Javascript Compare Objects to Elements

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related