En este artículo, aprenderemos cómo filtrar objetos por su valor de atributo de datos en jQuery. Hay dos enfoques que se pueden tomar para lograr esto:
Enfoque 1: usar los métodos this property y filter() , data() y css() en la biblioteca jQuery. Hay cuatro elementos de división que se definen en el siguiente ejemplo, cada uno con algún atributo de datos con su valor correspondiente. Aplicamos el método filter() a cada elemento de división que toma una función anónima como parámetro. Esta función anónima devuelve el booleano verdadero o falso , dependiendo de si el valor del atributo de datos de cada elemento de división es igual a una string en particular (la string es «válida» ). Para comprobar esto, los datos()se utiliza el método que toma el nombre del atributo después del prefijo de datos como un parámetro de string.
Después de esto, enstringmos el método css() con el método filter() para aplicar algún estilo en todos los elementos u objetos filtrados en función de la funcionalidad discutida anteriormente.
Ejemplo: en el siguiente ejemplo, el atributo de datos se nombró como geek de datos y todos los elementos filtrados se diseñaron con un color de fuente de color verde .
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
p {
font-size: 25px;
font-weight: bold;
}
div {
font-size: 20px;
font-weight: bold;
}
div:not(:last-child) {
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<p>jQuery - Filter Objects by Data Attribute Value</p>
<div class="geek-division" data-geek="invalid">
Geek 1
</div>
<div class="geek-division" data-geek="valid">
Geek 2
</div>
<div class="geek-division" data-geek="invalid">
Geek 3
</div>
<div class="geek-division" data-geek="valid">
Geek 4
</div>
<script type="text/javascript">
// Select all div with the class
// attribute "division"
$('div[class*="division"]')
.filter(function () {
return $(this).data("geek") == "valid";
}).css("color", "green");
</script>
</body>
</html>
Producción:
Enfoque 2: usar los métodos filter() y css() en la biblioteca jQuery. Este enfoque es bastante similar al enfoque anterior, pero la sintaxis es un poco más limpia y condensada. Estamos comprobando si el valor del atributo de datos de cada elemento de división es igual a la string «abierta» en lugar de la string «válida» para filtrar los elementos de división.
Ejemplo: en el siguiente ejemplo, el atributo de datos se ha nombrado como estado de datos y todos los elementos filtrados se han diseñado con un color de fuente verde azulado .
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
p {
font-size: 25px;
font-weight: bold;
}
div {
font-size: 20px;
font-weight: bold;
}
div:not(:last-child) {
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<p>jQuery - Filter Objects by Data Attribute Value</p>
<div class="geek-division" data-state="open">
Geek 1
</div>
<div class="geek-division" data-state="closed">
Geek 2
</div>
<div class="geek-division" data-state="open">
Geek 3
</div>
<div class="geek-division" data-state="closed">
Geek 4
</div>
<script type="text/javascript">
// Select all div elements with the
// class attribute containing "division"
$("div[class*=division]")
.filter("div[data-state=open]")
.css("color", "teal");
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA