En este artículo aprenderemos a filtrar los hijos de cualquier elemento en JQuery. JQuery es una biblioteca de JavaScript rápida y liviana que simplifica las interacciones entre un documento HTML/CSS, o más precisamente el Modelo de objetos de documento (DOM) y JavaScript. Es ampliamente famoso por su lema de «Escribe menos, haz más». Significa que puede lograr lo que necesita simplemente escribiendo unas pocas líneas de código.
Enfoque: podemos lograr esta tarea simplemente seleccionando los selectores apropiados. Por ejemplo, si elegimos un selector de primer hijo, solo se resaltará el primer hijo y si elegimos un selector de último hijo, se resaltará el último hijo.
El filtro secundario se divide en las siguientes categorías:
- Selector de primer hijo: este selector se utiliza para seleccionar todos los elementos que son el primer hijo de su padre.
- Selector de primero de tipo: este selector se utiliza para seleccionar todos los elementos que son los primeros entre los hermanos del mismo nombre de elemento.
- Selector de último hijo: este selector se utiliza para seleccionar todos los elementos que son el último hijo de su padre.
- Selector de último tipo: este selector se utiliza para seleccionar todos los elementos que son los últimos entre los hermanos del mismo nombre de elemento.
- Selector nth-child(): Este selector se utiliza para seleccionar todos los elementos que son el nth-child de su padre.
- Selector nth-last-child(): Este selector se utiliza para seleccionar todos los elementos que son el nth-child de su padre, contando desde el último elemento hasta el primero.
- Selector nth-last-of-type(): Este selector se utiliza para seleccionar todos los elementos que son el nth-child de su padre en relación con los hermanos con el mismo nombre de elemento, contando desde el último elemento hasta el primero.
- Selector nth-of-type(): este selector se utiliza para seleccionar todos los elementos que son el nth-child de su padre en relación con los hermanos con el mismo nombre de elemento.
- Selector de hijo único: este selector se utiliza para seleccionar todos los elementos que son el único hijo de su padre.
- Selector solo de tipo: este selector se utiliza para seleccionar todos los elementos que no tienen hermanos con el mismo nombre de elemento.
Ejemplo 1: En este ejemplo, usaremos el Selector de primer hijo para seleccionar el primer elemento hijo de su padre.
HTML
<!doctype html>
<html lang="en">
<head>
<style>
span {
color: black;
}
span.thisgreen {
color: green;
font-weight: bolder;
}
body {
text-align: center;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksForGeeks</h1>
<div>
<span>Database,</span>
<span>OS,</span>
<span>Computer Networks</span>
</div>
<div>
<span>Windows,</span>
<span>Linux,</span>
<span>MacOS</span>
</div>
<script>
$("div span:first-child")
.css("text-decoration", "underline")
.hover(function () {
$(this).addClass("thisgreen");
}, function () {
$(this).removeClass("thisgreen");
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, usaremos el Selector de último hijo para seleccionar el último elemento hijo de su padre.
HTML
<!doctype html>
<html lang="en">
<head>
<style>
span {
color: black;
}
span.thisgreen {
color: green;
font-weight: bolder;
}
body {
text-align: center;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksForGeeks</h1>
<div>
<span>Database,</span>
<span>OS,</span>
<span>Computer Networks</span>
</div>
<div>
<span>Windows,</span>
<span>Linux,</span>
<span>MacOS</span>
</div>
<script>
$("div span:last-child")
.css("text-decoration", "underline")
.hover(function () {
$(this).addClass("thisgreen");
}, function () {
$(this).removeClass("thisgreen");
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por volumezero9786 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA