Comparing jQuery objects

Question

I use a selector to get a group of objects (0 or more):

var $openMenus = $Triggers.filter(".trigger-hover"); 

Then I have an event attached to an element, which may or may not be in the above object. In this case, when I want to compare the element that fires the event, c

 $([selector]) .focus(function(){ var $thisMenu = $(this); $openMenus.each(function(){ if ($(this) != $thisMenu ){ [do something] } }) }) 

This will not work. Although multiple jQuery objects can REALLE the same DOM object, they are actually separate jQuery objects, and true will never be compared for this.

Given what will handle this? How do you have two jQuery objects and compare them to see if one jQuery object references the same DOM element as the other?

I can give each element that I am trying to select an ID, but I am wondering if there is another way to do this without adding more to the HTML.

Answer 1

I don’t know why you do not need id values, but you can always make a small jQuery plugin to give elements unique id values ​​if they pass values ​​from the original HTML.

 jQuery.fn.setId = (function setupSetId() { var counter = 0; // or maybe new Date().getTime() return function setId() { return this.each(function setIdInternal() { var $self = jQuery(this); if (!$self.attr('id')) $self.attr('id', '_' + counter++); }); }; })(); 

Then you can write another utility to compare jQuery arrays by element id.

Answer 2

After using bobince, instead of using wrapper [0], use the correct get (0) method to return the first element stored in your jQuery object.

 var focused = null; $(':input').focus( function() { focused = $(this); compare($(this)); //Compare them...trivial but will return true despite being different jQuery objects. }).blur( function() { focused = null; }); function compare(element) { if (element.get(0) == focused.get(0)) { alert('The same'); } } 

Answer 3

You cannot make a comparison in the jQuery shell, but you can do it based on the DOM Node. Lose a few dollars and everything is fine:

 .focus(function(){ var that= this; $openMenus.each(function(){ if (this!==that){ [do something] } }); }) 

(or use, for example, wrapper[0] to get the DOM Node from a single-object jQuery wrapper.)

(I used === for comparison, because it is usually best, but in this case it will work with == .)

Answer 4

To compare DOM elements, you must compare the original elements, which can be obtained as the first element in the array, for example: $ ('. Test') [0] .

So, in your case, the code should look like this:

 $([selector]) .focus(function(){ var $thisMenu = $(this); $openMenus.each(function(){ if ($(this)[0] != $thisMenu[0]){ [do something] } }) }) 

Answer 5

You can get around this using the .siblings () function in jQuery. This way you can avoid comparing objects.

 $(this).mouseenter( function(){ //use functions you want to replace "someFunctionHere" $(this).siblings().find('ul').someFunctionHere(); //do something else... } ); 

Best,
Guyun

Answer 6

JQuery objects cannot be compared directly, but this can easily be achieved using .add () or .not () operations:

 var $thisMenu = $(this); $openMenus.each(function(){ if ($(this).add( $thisMenu ).length == 1 ){ [do something] } }) 

or

 var $thisMenu = $(this); $openMenus.each(function(){ if ($(this).not( $thisMenu ).length == 0 ){ [do something] } })