jQuery对象改为HTML元素，为什么？

Question

我不明白jQuery的行为..

我有这个选择器，在$ object之后：

<span class="play-btn" data-play="true">
..
   <img />
..
</span>

var currentTrack = $('span.play-btn[data-play="true"] img');

结果：

image -> click <- （OK）

问题： 我需要访问img对象来获取currentTrack[0].attr('src')等其他属性，但是这段代码currentTrack[0]创建了HTML元素，只是字符串（<img src="" data-id="" ..），为什么？

Answer 1

jQuery创建一个包含本机DOM节点的类数组对象，因此第一个本机DOM节点将位于jQcollection[0]等。

当您将本机DOM节点记录到控制台时，您将获得DOM节点所包含的HTML。

您真正想要的是使用 jQuery对象，而不是本机DOM节点

var currentTrack = $('span.play-btn[data-play="true"] img');

var attribute = currentTrack.attr('src');
var data-val  = currentTrack.data('id');

如果选择器与多个元素匹配，而您只需要获取第一个元素，那么您将使用jQuery＆＃39; s eq()

var currentTrack = $('span.play-btn[data-play="true"] img');

var firstTrack = currentTrack.eq(0);

Answer 2

jQuery元素“已更改为HTML”，因为您在jQuery选择器的末尾添加了[0]。 这会转换jQuery object into a native DOM element。

要选择第一个元素，您可以使用：

1. $('span.play-btn[data-play="true"] img').first() =＆gt; .first()
2. $('span.play-btn[data-play="true"] img').eq(0) =＆gt; .eq()
3. $('span.play-btn[data-play="true"] img:first') =＆GT; :first


检查jQuery selectors。