HOWTO · jQuery
jQuery: Element mit Datenattribut finden
Um mit jQuery nach einem Element mit einem Datenattribut zu suchen, können Sie die Methode find(), die Methode filter() oder einen CSS-Attributselektor verwenden. In diesem Artikel erfahren Sie anhand praktischer Codebeispiele, wie Sie sie alle verwenden können.
Auf dieser Seite
Um mit jQuery nach einem Element mit einem Datenattribut zu suchen, können Sie die Methode .find(), die Methode .filter() oder einen CSS-Attributselektor verwenden. In diesem Artikel erfahren Sie anhand praktischer Codebeispiele, wie Sie sie alle verwenden können.
Finden Sie ein Datenattribut mit der jQuery-Methode .find()
In jQuery können Sie mit der Methode .find() mithilfe eines CSS-Selektors nach einem Element auf einer Webseite suchen. Hier können Sie es verwenden, um ein Datenattribut zu finden, wenn Sie den richtigen CSS-Selektor schreiben.
Daraus können Sie mit Elementen, die mit dem CSS-Selektor übereinstimmen, machen, was Sie wollen. Im Beispiel unten haben wir nach data-name=Edison gesucht und die Schriftgrösse auf 3em geändert.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<ul>
<li data-name="Edison">Thomas Edison</li>
<li data-name="Einstein">Albert Einstein</li>
<li data-name="Rutherford">Ernest Rutherford</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("ul").find("[data-name='Edison']").css('font-size', '3em');
});
</script>
</body>
</html>
Ausgang:
Finden Sie ein Datenattribut mit einem CSS-Attributselektor
Sie können ein Datenattribut mithilfe eines CSS-Attributselektors finden. Aber es gibt zwei Möglichkeiten, dies zu tun, abhängig von Ihrem HTML-Markup.
Im ersten Beispiel unten haben die Listenelemente Datenattribute. Sie können also einen CSS-Nachkommen-Selektor verwenden, der aus einem Tag-Selektor und einem CSS-Attribut-Selektor besteht.
Das Ergebnis ist eine punktgenaue Übereinstimmung mit dem erforderlichen Element, und Sie können anschließend CSS-Stile anwenden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 1.2em;
}
</style>
</head>
<body>
<main>
<ul>
<li data-iso="MRT">Mauritania</li>
<li data-iso="LUX">Luxembourg</li>
<li data-iso="HRV">Croatia</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("ul [data-iso='MRT'").css('color', 'magenta');
});
</script>
</body>
</html>
Ausgang:
Das zweite Beispiel unten hat einen anderen HTML- und jQuery-Code. Erstens hat das Elternelement <ul> das Datenattribut im HTML.
Das bedeutet, dass der vorherige Selektor im letzten Beispiel nicht funktioniert. Um dies zu lösen, können Sie das Leerzeichen zwischen dem <ul>-Element und dem CSS-Attributselektor entfernen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02_01-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main>
<ul data-viruses="computer-viruses">
<li>Mydoom</li>
<li>ILOVEYOU</li>
<li>WannaCry</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("ul[data-viruses='computer-viruses']").css('font-style', 'italic');
});
</script>
</body>
</html>
Ausgang:
Finden Sie ein Datenattribut mit der Methode .filter()
Die Methode .filter() passt ein HTML-Element mit einem CSS-Selektor an. Damit können Sie den CSS-Selektor eines Elements übergeben und mit dem Ergebnis arbeiten.
Das haben wir im folgenden Codebeispiel getan. Im Gegensatz zu den vorherigen Beispielen fügen wir eine CSS-Klasse mit der jQuery-Methode .addClass() hinzu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-jQuery-find-data-attr</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.style-chef {
background-color: #1a1a1a;
color: #ffffff;
padding: 0.2em;
width: 40%;
}
</style>
</head>
<body>
<main>
<ul>
<li data-esolang="Befunge">Befunge</li>
<li data-esolang="Chef">Chef</li>
<li data-esolang="Whitespace">Whitespace</li>
</ul>
</main>
<script>
$(document).ready(function() {
$("li").filter('[data-esolang="Chef"]').addClass('style-chef');
});
</script>
</body>
</html>
Ausgang:
