被点击的html元素不等于jQuery $.each()循环中的相同元素

Question

假设我有以下元素

<a id="first" class="myLink" data-something="0">First</a>
<a id="second" class="myLink" data-something="0">Second</a>
<a id="third" class="myLink" data-something="0">Third</a>

然后修改第一个元素的数据，像这样

$('#first').data('something', 1)

现在，如果我做

$('#first').on('click', function(){
    var element = $(this)
    $('.myLink').each(function(){
        if ($(this) == element) {
            alert('equals')
        }
    })
})

然后点击第一个元素，我没有得到警告。

$.each()中的元素似乎是加载文档的元素，它不知道数据赋值。

对此有什么澄清吗?是否有其他方法可以检索元素的当前状态?

Answer 1

jQuery函数($)返回一个新的 Object(通常称为"jQuery对象")，它表示DOM元素的集合(以及一些属性和操作集合的方法)。即使选择了相同的元素(甚至是相同或不同的选择器)，这意味着jQuery对象包含相同的DOM元素，它们仍然不会相等。JS对象永远不会是==(或===)，除非它们实际上将引用到相同的对象。

例如，$("#element_id") === $("#element_id")是false，即使它们选择了相同的元素。

但是var el = $("#element_id"), ref = el; alert(el === ref);会警告true，因为它们都指向同一个对象。

如果你想比较这些元素，比较对DOM元素的引用，像这样:

$('#first').on('click', function(){
    var element = this;
    $('.myLink').each(function(i, el){
        if (this === element) {
            alert(i + ' equals');
        }
    });
});

演示:

http://jsfiddle.net/HEmB7/

JavaScript中的对象相等:JavaScript中的对象比较——它是一个副本，但是它和复制的帖子包含了很多信息。

另一种比较方法是使用jQuery .is()方法。如果使用得当，它会非常强大。它接受字符串选择器、函数、jQuery对象或DOM元素引用。在一个简单的例子，像你的，它可以很容易地使用(但我几乎发现它太多了，因为一个jQuery对象需要创建和额外的处理是由.is()完成)，当你可以只使用===，这是有效和可靠的太…尽管.is()的可读性更强一些。下面是它的用法:

$('#first').on('click', function(){
    var element = $(this);
    $('.myLink').each(function(i, el){
        if (element.is(this)) {
            alert(i + ' equals');
        }
    });
});

演示:

http://jsfiddle.net/HEmB7/2/

参考:

• http://api.jquery.com/is/