Antes de ver las diferencias entre el método find() y children() . Entendamos brevemente qué son estos y qué hacen.
find(): este método se usa 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.
Valores devueltos: Devuelve todos los descendientes coincidentes del elemento en 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 1: en la salida, podemos ver claramente que todas las etiquetas ‘ span ‘ cambiaron de color, quién es descendiente de la etiqueta p .
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>
<script>
$('p').find('span').css('color','blue')
</script>
</body>
</html>
Producción:
children(): El método children() también se usa para obtener todos los descendientes de cada elemento en el conjunto de elementos coincidentes. También podemos filtrar el resultado.
Sintaxis:
$(selector).children(filter-expression)
Parámetro: (Opcional) Si no proporcionamos ninguna expresión de filtro, devolverá todos los elementos secundarios directos del elemento seleccionado. Para filtrar el resultado, pase el argumento.
Valor de retorno: Devuelve solo los hijos directos del elemento seleccionado.
Ejemplo 2: Podemos ver que cambió el color de las etiquetas p que eran hijos directos de la clase ‘a’. Y si no hemos proporcionado ninguna expresión de filtro al método children() , entonces toda la etiqueta p sería azul porque la clase ‘b’ también es un hijo directo de la clase ‘a’
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<div class="a">
<p>Hello geeks</p>
<div class="b">
<p>Hey Geeks</p>
</div>
<p>Hello geeks</p>
</div>
<script>
$('.a').children('p').css('color','blue')
</script>
</body>
</html>
Producción:
Diferencias entre los métodos find() y children(): El funcionamiento de ambos métodos es casi el mismo. Solo hay una gran diferencia entre ellos, veamos cuál es.
Tomemos un ejemplo.
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript">
</script>
</head>
<body>
<div class=a>
<p id="a1"> a1 </p>
<p id="a1"> a2 </p>
<div class=b>
<p id="a2"> b1 </p>
<p id="a2"> b1 </p>
<div class=c>
<p id="a3"> c1 </p>
<p id="a3"> c2 </p>
</div>
</div>
</div>
<script>
$(".a").find("p").css('color','red')
$(".a").children("p").css('color','blue')
</script>
</body>
</html>
Producción:
Hemos tomado 3 clases a, byc y cada una contiene dos etiquetas «p».
Veamos qué pasará cuando llamemos a los métodos find() y children() en esta estructura.
Al llamar al método find() en la clase ‘a’, irá hasta el último descendiente y buscará la etiqueta p en todas partes. Comprueba sus hijos, luego los hijos de los hijos, y así sucesivamente.
Al llamar al método children() en la clase ‘a’, solo verificará sus hijos directos, es decir, solo verificará en un nivel.
| encontrar() | niños() |
|---|---|
| Este método se utiliza para buscar más de un nivel por debajo del árbol DOM. | Este método se utiliza para buscar un solo nivel en el árbol DOM. |
| Es más lento que el método children(). | Es más rápido que el método find(). |
|
Su sintaxis es -: $(selector).buscar(filtro) |
Su sintaxis es -: $(selector).niños(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. | Se utiliza para devolver todos los hijos directos 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