jQuery: Element mit Datenattribut finden
-
Finden Sie ein Datenattribut mit der jQuery-Methode
.find() - Finden Sie ein Datenattribut mit einem CSS-Attributselektor
-
Finden Sie ein Datenattribut mit der Methode
.filter()
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:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn