Abrufen von Datenattributwerten in jQuery

jQuery bietet zwei Möglichkeiten, um die Datenattributwerte abzurufen: Die erste ist die .data()-Methode und die zweite die .attr()-Methode. Im heutigen Beitrag erfahren Sie, wie Sie die Datenattributwerte in jQuery abrufen.

Verwenden Sie .data() und .attr(), um Datenattributwerte in jQuery abzurufen

Datensätze, die von data() oder einem HTML5-Attribut data-* gesetzt wurden, werden von der Methode .data() zurückgegeben. Diese Methode gibt beliebige Daten zurück, die dem ersten Element in der jQuery-Sammlung zugeordnet sind.

Ohne Übergabe des Parameters gibt .data() ein JavaScript-Objekt zurück. Dieses JavaScript-Objekt enthält jeden gespeicherten Wert als Ressource oder Asset.

Das Objekt kann sofort verwendet werden, um die Datensatzwerte zu erhalten.

Syntax:

.data(key)

Diese Methode akzeptiert den Namen der gespeicherten Daten als Schlüssel. Weitere Informationen zur Methode .data() finden Sie in der Dokumentation zu .data().

Wir können auch den Wert eines Merkmals für das erste Detail in der Menge der angepassten Faktoren erhalten. Der .attr()-Ansatz erhält den Kennwert für das beste Primärelement im Matched Set.

Um den Wert für jedes Detail zu erhalten, können wir ein Schleifenkonstrukt einschließlich der jQuery-Methode .each() oder .map() verwenden.

Syntax:

.attr(attributeName)

Diese Methode akzeptiert den Attributnamen, um die dem Attribut zugeordneten Daten abzurufen. Die Verwendung der jQuery-Methode .attr() zum Abrufen des Werts der Eigenschaft eines Elements hat die folgenden Hauptvorteile.

Ohne Verzögerung kann es auf einem jQuery-Objekt aufgerufen und mit verschiedenen jQuery-Methoden verkettet werden. Die Werte einiger Attribute können in allen Browsern und sogar in Versionen eines einzelnen Browsers ungleichmäßig angegeben werden; Der .attr()-Ansatz reduziert solche Inkonsistenzen.

Weitere Informationen zur Methode .attr() finden Sie in der Dokumentation zu .attr().

Lassen Sie es uns anhand des folgenden Beispiels verstehen.

Beispielcode:

<button data-id="btn-1" value="Hello">Hello World!</button>

console.log($('button').attr('data-id'));
console.log($('button').data('id'));

Wir haben im obigen Beispiel eine Schaltfläche mit einem auf btn-1 gesetzten data-id-Attribut und einem Wert von Hello beschrieben. Mit der Methode data() oder attr() können Sie auf das Datenattribut zugreifen.

Versuchen Sie, das obige Code-Snippet in einem beliebigen Browser auszuführen, der jQuery unterstützt. Das Ergebnis wird unten angezeigt.

Ausgang:

"btn-1"
"btn-1"

Sie können den obigen Beispielcode hier ausführen.