comparing jQuery objects

Question

I'm using 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 item that may or may not be in the object above. Within that event where I want to compare the item that triggers the event to c

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

This will not work. While multiple jQuery objects may REFER to the same DOM object, they are actually separate jQuery objects and there for will never compare true.

Given that, what would be the way to handle this? How does one have two jQuery objects and compare them to see if one jQuery object refers to the same DOM element as another?

I could give each item I'm trying to select an ID, but am wondering if there is another way to go about it without having to add more to the HTML.

Solution 1

I don't know why you wouldn't want "id" values, but you could always make a little jQuery plugin to give elements unique "id" values if they're missing 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.

Solution 2

Following on from bobince, instead of using wrapper[0] use the proper 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');
   }
}

Solution 3

You can't make the comparison on the jQuery wrapper, but you can make it on the underlying DOM Node. Lose a few dollars and you're fine:

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

(or use eg. wrapper[0] to get the DOM Node from a single-item jQuery wrapper.)

(I used === for the comparison because it's usually best, but it would work with == too in this case.)

Solution 4

To compare DOM elements you should compare raw elements, which avalible as first element in array, like: $('.test')[0].

So in your case, code should look like this:

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

View more solutions