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.

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