Antes de ver las diferencias entre los métodos find() y más cercano() , comprendamos brevemente qué son y qué hacen.
1. Método find(): este método se utiliza para obtener todos los descendientes filtrados de cada elemento en el conjunto actual de elementos coincidentes.
Sintaxis:
$(selector).find('filter-expression')
Parámetro: una expresión de selector, elemento u objeto jQuery para filtrar la búsqueda de descendientes.
Valor devuelto: Devuelve todos los descendientes coincidentes del elemento sobre el que se llama al método find() . Este método atraviesa el DOM hasta el último descendiente. Significa que atraviesa todos los niveles hasta el DOM, como un hijo, un nieto, un bisnieto, etc.
Ejemplo: en el siguiente código , encontrará todas las etiquetas de intervalo dentro de la etiqueta p y cambiará su color a azul.
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p><span>Hello </span>Geeks!</p>
<div>
<p>Hey! <span>How </span>are you</p>
</div>
<p>Hello Geeks</p>
<script>
$('p').find('span').css('color', 'blue')
</script>
</body>
</html>
Producción:
2. Método más cercano(): este método se utiliza para obtener el primer antepasado del elemento seleccionado. Los ascendientes pueden ser padres, abuelos, bisabuelos, etc.
Sintaxis:
$(selector).closest(filter-expression)
Parámetro: una expresión de selector, elemento u objeto jQuery para filtrar la búsqueda de un antepasado.
Ejemplo: este método recorre todo el camino hasta el elemento raíz del documento, es decir, <HTML>, para encontrar el primer antepasado del elemento seleccionado. Tenemos tres niveles de etiqueta de lista desordenada <ul> . Después de llamar al método más cercano() en la etiqueta <li> , devuelve la primera etiqueta <ul> más cercana.
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<ul>
<li>three</li>
<li>four</li>
<ul>
<li id="select-Me">five</li>
<li>six</li>
</ul>
</ul>
</ul>
<script>
$("#select-Me")
.closest("ul")
.css("color", "blue");
</script>
</body>
</html>
Producción:
Diferencia entre find() y más cercano()
|
encontrar() |
más cercano() |
|---|---|
| Este método se usa para obtener todos los descendientes filtrados de cada elemento en el conjunto actual de elementos coincidentes. | Este método se utiliza para obtener el primer antepasado del elemento seleccionado. |
| Este método atraviesa el DOM hasta el último descendiente. | Este método atraviesa el DOM hasta el elemento raíz del documento. |
| Este método baja del árbol mirando al niño y al niño del niño. | Este método sube el árbol mirando a los padres. |
|
Su sintaxis es -: $(selector).buscar(filtro) |
Su sintaxis es -: $(selector).más cercano(filtro) |
| Toma Parámetro como una expresión de filtro. | Toma parámetro como filtro. |
| Se utiliza para devolver los elementos descendientes del elemento seleccionado. | Devuelve el primer ancestro del elemento seleccionado. |
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA