El find() es un método incorporado en jQuery que se usa para encontrar todos los elementos descendientes del elemento seleccionado. Recorrerá todo el camino hasta la última hoja del elemento seleccionado en el árbol DOM.
Sintaxis:
$(selector).find()
Aquí el selector son los elementos seleccionados de los cuales se van a encontrar todos los elementos descendientes.
Parámetros: No acepta ningún parámetro.
Valor devuelto: Devuelve todos los elementos descendientes del elemento seleccionado.
Código #1:
En el siguiente código, todo el elemento «span» conectado al elemento «div» se resalta con el color verde.
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid grey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").find("span").css({
"color": "green",
"border": "2px solid green"
});
});
</script>
</head>
<body>
<div class="descendants"
style="width:500px;">This is the current element !!!
<p>This is the paragraph element !!!
<span> This is span element !!!</span>
</p>
<p>This is the paragraph element !!!
<span>This is span element !!!</span>
</p>
</div>
</body>
</html>
Producción:
Todo el elemento descendiente del elemento en particular también se puede encontrar con la ayuda de la función find() con algún parámetro.
Sintaxis:
$(selector1).children("selector2")
Aquí selector1 es el elemento seleccionado del que se van a encontrar todos los elementos descendientes.
Parámetros: Acepta un parámetro que se especifica a continuación-
Valor devuelto: Devuelve todos los hijos del elemento seleccionado.
Código #2:
En el siguiente código, todos los elementos «span» del elemento «p» se seleccionan y resaltan con color verde.
<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: grey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("p").find("*").css({
"color": "green",
"border": "2px solid green"
});
});
</script>
</head>
<body>
<div class="descendants"
style="width:500px;">This is the current element !
<p>This is the paragraph element !!!!
<span>This is span 1 !!!</span>
<span>This is span 2 !!!</span>
<span>This is span 3 !!!</span>
<span>This is span 4 !!!</span>
</p>
</div>
</body>
</html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA