comparing jQuery objects

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 actual开发者_StackOverflowly 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.

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');
   }
}

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.)

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.

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]
        }
    }) 
})

jQuery objects can not be compared directly but this can be easily achieved by 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]
   }
}) 

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

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