jQuery – Data Attribute in variable speichern und auslesen

Data-Attribute wie data-id speicherst du direkt im HTML an einem Element. Mit jQuery liest du den Wert per $(this).attr('data-id') oder kürzer per $(this).data('id') aus und legst ihn in einer Variablen ab. Im Beispiel gibt ein Klick auf eine Box ihre ID per alert() aus. So kannst du dir etwa merken, welches Element ein Besucher zuletzt angeklickt hat.

Oliver Götze

Verfasst am 22.09.2017

Update 28.10.2026

Data-Attribute sind ein netter Helfer, wenn es darum geht sich zu merken worauf der Besucher beispielsweise als letztes geklickt hat. Aber auch ein paar jQuery Spielereien lassen sich damit super erstellen.

Beispiel: Mit Data Attributen ein alert erstellen

HTML
JS
CSS

HTML

									<div class="boxen">
	<div class="test" data-id="1">1</div>
	<div class="test" data-id="2">2</div>
	<div class="test" data-id="3">3</div>
</div>

									jQuery( 'div.test' ).on('click', function() {
	var dataID	=	jQuery(this).attr('data-id');
	alert(dataID);
});

CSS

									div.boxen {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
	padding: 20px;				
}
div.test {
	width: 30%;
	height: 200px;
	display: flex;
	text-align: center;
	background: #6c91bf;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	opacity: 0.6;
	font-size: 50px;
	color: rgba(255,255,255,.5);
	cursor: pointer;
}
div.test:hover {
	opacity: 1;
	box-shadow:  0 0 10px rgba(0,0,0,0.3);
	font-size: 70px;
}
div.test+div.test {
	background: #a14ebf;
}
div.test+div.test+div.test {
	background: #af2bbf;
}

In meinem Beispiel nenne ich es einfach data-id und hänge es einem Div an:

html

				<div class="test" data-id="1"></div>

Anschließend muss nur noch die data-id mittels jQuery in einem var gespeichert werden. Nun kann man damit arbeiten.

javascript

				jQuery( 'div.test' ).on('click', function() {
	var dataID	=	jQuery(this).attr('data-id');
	alert(dataID);
});

Man kann aber auch die attribute überschreiben. Das geht auch ganz einfach mithilfe von attr.

Im folgenden Beispiel wird die data-id mit der ID 3 überschrieben.

javascript

				jQuery('div.test').attr('data-id', '3');

In reinem JavaScript erreichst du Data-Attribute über die Eigenschaft dataset. Aus data-id wird element.dataset.id: document.querySelectorAll('div.test').forEach(box => box.addEventListener('click', () => alert(box.dataset.id))). Bindestriche im Attributnamen werden dabei zu camelCase, aus data-user-name wird dataset.userName. Werte setzt du genauso: box.dataset.id = '4' schreibt das Attribut data-id direkt ins HTML.

.attr() liest den Wert immer als Text direkt aus dem HTML. .data() wandelt Werte um, aus "1" wird die Zahl 1, und speichert sie in einem internen Cache. Änderungen mit .data('id', 5) landen deshalb nicht im HTML-Attribut. Brauchst du den geänderten Wert im Markup, etwa für CSS-Selektoren, setze ihn mit .attr().

3 Likes