jQuery: Buscar elemento con atributo de datos
-
Encuentre un atributo de datos usando el método jQuery
.find() - Encuentre un atributo de datos utilizando un selector de atributos CSS
-
Encuentre un atributo de datos utilizando el método
.filter()
Para buscar un elemento con un atributo de datos usando jQuery, puede usar el método .find(), el método .filter() o un selector de atributos CSS. Este artículo le enseña cómo puede usarlos todos usando ejemplos prácticos de código.
Encuentre un atributo de datos usando el método jQuery .find()
En jQuery, el método .find() te permite buscar un elemento en una página web usando un selector CSS. Aquí, puede usarlo para encontrar un atributo de datos si escribe el selector CSS correcto.
A partir de esto, puedes hacer lo que quieras con elementos que coincidan con el selector de CSS. En el siguiente ejemplo, buscamos data-name=Edison y cambiamos el tamaño de fuente a 3em.
<!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>
Producción:
Encuentre un atributo de datos utilizando un selector de atributos CSS
Puede encontrar un atributo de datos utilizando un selector de atributos CSS. Pero hay dos formas de hacer esto, dependiendo de su marcado HTML.
En el primer ejemplo a continuación, los elementos de la lista tienen atributos de datos. Por lo tanto, puede usar un selector de descendientes de CSS, que consta de un selector de etiquetas y un selector de atributos de CSS.
El resultado es una coincidencia precisa del elemento requerido, y luego puede aplicar estilos CSS.
<!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>
Producción:
El segundo ejemplo a continuación tiene un código HTML y jQuery diferente. Primero, el elemento principal <ul> tiene el atributo de datos en el HTML.
Esto significa que el selector anterior en el último ejemplo no funcionará. Para solucionar esto, puedes eliminar el espacio entre el elemento <ul> y el selector de atributos CSS.
<!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>
Producción:
Encuentre un atributo de datos utilizando el método .filter()
El método .filter() coincidirá con un elemento HTML usando un selector CSS. Con esto, puedes pasar el selector CSS de un elemento y trabajar con el resultado.
Eso es lo que hemos hecho en el siguiente ejemplo de código. A diferencia de los ejemplos anteriores, agregamos una clase CSS usando el método jQuery .addClass().
<!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>
Producción:
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