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

Question

当我使用此代码时 $('#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') 对象，但找不到任何对象。

我不明白为什么会有差异。 Children Action [1] 可能会更改结果中的行为。如果有人有任何想法，请告诉我。

非常感谢!

Answer 1

If I instead use $('[data-toggle="pill"]')[1] which is exactly the same DOM Element...

事实并非如此。第一个示例 $('#pills-testscript-tab') 返回一个 jQuery 对象。

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

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

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