javascript - 单击的 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 中对象相等性的一些内容:Object comparison in JavaScript - 它是重复的，但它和重复的帖子包含重要信息。

进行此比较的另一种方法是使用 jQuery .is()方法。如果使用得当，它可以非常强大。它接受字符串选择器、函数、jQuery 对象或 DOM 元素引用。在像你这样的简单示例中，当你可以使用 .is() 时，它可以很容易地使用(但我几乎发现它太多了，因为需要创建一个 jQuery 对象，并由 === 完成额外的处理)。这也是有效且可靠的......尽管 .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/