jQuery-Objekt wird in HTML-Element geändert, warum?

Question

Ich verstehe nicht das Verhalten von jQuery ..

ich diese Wähler habe und nach $ Objekt:

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

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

Ergebnis:

image -> click <- (OK)

PROBLEM : Ich brauche Zugriff auf IMG-Objekt, um die Attribute wie currentTrack[0].attr('src') und andere zu bekommen, aber thi s Code currentTrack[0] HTML-Element erstellen, nur Zeichenfolge (<img src="" data-id="" ..), warum ??

Answer 1

jQuery erstellt ein Array-ähnliches Objekt des nativen DOM-Knoten enthält, so dass der erste nativen DOM-Knoten in jQcollection[0] usw. wäre

Wenn Sie einen nativen DOM-Knoten an die Konsole anmelden, können Sie den HTML-Code, DOM erhalten Knoten besteht aus.

Was Sie wirklich wollte, war das jQuery-Objekt, nicht die native DOM-Knoten

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

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

Wenn der Wähler entspricht mehr als ein Element zu verwenden, und Sie müssen nur die erste zu bekommen, Sie‘ d verwenden eq()

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

var firstTrack = currentTrack.eq(0); 

Answer 2

jQuery Element jQuery ist „in HTML geändert“, weil Sie [0] am Ende des jQuery-Selektor hinzugefügt.
Dies verwandelt eine jQuery object into a native DOM element.

das erste Element auszuwählen, die Sie verwenden können:

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

prüfen jQuery selectors.