时间戳

首页 > 解决方案 > 以不同的方式选择 DOM Element 会带来不同的结果

javascript - 以不同的方式选择 DOM Element 会带来不同的结果

问题描述

当我使用此代码时$('#pills-testscript-tab')，我会在 Chrome 开发工具中得到以下结果：

k.fn.init [a#pills-testscript-tab.nav-link]`

这个结果是可扩展的，我可以访问它的所有功能。如果我改为使用$('[data-toggle="pill"]')[1]完全相同的 DOM 元素，那么我将无法访问它的所有功能，并且开发工具中的结果是：

<a class="nav-link" id="pills-testscript-tab" data-toggle="pill" href="#pills-testscript" role="tab" aria-controls="pills-testscript" aria-selected="false">Test Script</a>

这是不可扩展的。

我还尝试在$('[data-toggle="pill"]')[1]对象中找到一个函数，它为我提供了与对象中相同的一组函数$('#pills-testscript-tab')，但找不到任何函数。

我不明白为什么会有差异。可能是儿童动作[1]改变了结果中的行为。如果有人有任何想法，请告诉我。

非常感谢！

标签： javascriptjqueryhtml

解决方案

如果我改为使用$('[data-toggle="pill"]')[1]完全相同的 DOM 元素...

不是这种情况。第一个例子，$('#pills-testscript-tab')返回一个jQuery 对象。

第二个示例，$('[data-toggle="pill"]')[1]返回在 jQuery 对象中找到的第二个Element 对象，因为您使用的是索引访问器。这就是您在控制台中看到差异的原因。

要将集合中的第二个元素作为 jQuery 对象返回，请使用eq()：

var $foo = $('[data-toggle="pill"]').eq(1);

推荐阅读