jQuery - 2つの要素が同じかどうかを確認する方法？

Question

私は関数に要素を渡してから、その特定の要素を親を横断しながら照合する必要があります。キャッチ（私のような無知な誰かのために）は、この要素にidがないことです。次の例では、私はそれがtrueを返すことはありませんjQueryのオブジェクトを比較

function colorize(element) { 
    element.parent().find('span').each(function() { 
     if ($(this)===element) { // the problem is this is always false 
      $(this).css('background','yellow'); 
     } else { 
      $(this).css('background','pink'); 
     } 
    }); 
} 
$('span').click(function() { 
    colorize($(this)); 
}); 

Answer 1

黄色に変わります上の1がクリックされた以外の各jQueryオブジェクトがAA新しいオブジェクトであるため、すべての要素がそのセレクタがある場合でも、ピンクをオンにします等しい。

は、要素を比較するには、DOM要素が等しいかどうかを確認する必要があります。

this === element.get(0); 

Answer 2

あなたがする必要はありません。特定の要素に常に特殊なスタイルを適用しているので、すべての要素を色付けしてから、特定の要素の色を変更します。

function colorize(element) { 
    element.parent().find('span').each(function() { 
     $(this).css('background','pink'); 
    }); 

    element.css('background','yellow'); 
} 

比較の問題は、2つのオブジェクト（jQueryオブジェクト）を比較していることでした。オブジェクトを比較するとき、彼らは同じものを指している場合を除き、それらは等しくないとみなされます。

var o1 = {}; 
var o2 = {}; 
o1 !== o2; 

あなたはjQueryのラッパー削除することによってこの問題を回避することができます

function colorize(element) { 
    var realElement = element[0]; 

    element.parent().find('span').each(function() { 
     if (this === realElement) { 
      $(this).css('background','yellow'); 
     } else { 
      $(this).css('background','pink'); 
     } 
    }); 
} 

この方法は、あなたがしていますDOM要素をDOM要素と比較し、リンゴをオレンジやオブジェクトからオブジェクトに比較することはありません。 （非推奨）

Answer 3

使用isEqualNode

this.isEqualNode(element) 

または使用isSameNode

this.isSameNode(element) 

Answer 4

あなたはjQueryのis()機能を使用することができます。元の答えはhereです。

function colorize(element) { 
    element.parent().find('span').each(function() { 
     if ($(this).is(element)) { 
      $(this).css('background','yellow'); 
     } else { 
      $(this).css('background','pink'); 
     } 
    }); 
}