CODEWITHSUNDEEP
objectcomparisonjquery
DA.
DA.

Reputation: 40671

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

Upvotes: 6

Views: 15580

Answers (6)

Craig
Craig

Reputation: 101

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

Upvotes: 10

Eagle
Eagle

Reputation: 337

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

Upvotes: 0

Thomas
Thomas

Reputation: 1

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

Upvotes: 0

Nikita Koksharov
Nikita Koksharov

Reputation: 10793

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

Upvotes: 1

bobince
bobince

Reputation: 536399

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

Upvotes: 3

Pointy
Pointy

Reputation: 413737

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.

Upvotes: 1

Related Questions