Exploración jQuery - método find()
Ejemplo
Buscar todos los elementos span descendientes de los párrafos y establecer su color a rojo:
$("p").find("span").css('color','red');
Definición y uso
El método find() obtiene los descendientes de cada elemento en la colección de elementos actual, filtrando mediante selector, objeto jQuery o elemento.
Sintaxis
.find(selector)
| Parámetros | Descripción |
|---|---|
| selector | Valor de cadena que contiene la expresión de selector proporcionada para coincidir con la colección de elementos actual. |
Explicación detallada
Si se proporciona un objeto jQuery que representa una colección de elementos DOM, el método .find() permite buscar estos elementos en el árbol DOM y construir un nuevo objeto jQuery con los elementos coincidentes. .find() es similar a .children(), pero la diferencia es que el último solo se desplaza hacia abajo en un nivel único del árbol DOM.
La primera característica evidente del método .find() es que acepta una expresión de selector que es del mismo tipo que la que pasamos a la función $(). Filtrará los elementos mediante la prueba de si coinciden con la expresión.
Por favor, piense en la siguiente lista anidada simple:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Comenzaremos a buscar en los elementos de la lista II:
$('li.item-ii').find('li').css('background-color', 'red');
El resultado de esta investigación es que los proyectos A, B, 1, 2, 3 y C han sido configurados con un fondo rojo. Incluso si el proyecto II coincide con la expresión del selector, no se incluirá en los resultados; solo se realizará la coincidencia en los descendientes.
Diferente de otros métodos de búsqueda en el árbol, la expresión del selector es un parámetro obligatorio para .find(). Si necesitamos recuperar todos los elementos descendientes, podemos pasar el selector de wildcard '*'.
El contexto del selector es implementado por el método .find(); por lo tanto, $('li.item-ii').find('li') es equivalente a $('li', 'li.item-ii').
Para jQuery 1.6, también podemos usar una colección jQuery o elemento dado para realizar la filtración. Siguiendo la lista anidada anterior, primero escribimos así:
var $allListElements = $('li');
Luego, paso este objeto jQuery al método find:
$('li.item-ii').find( $allListElements );
El código anterior devolverá una colección jQuery que contiene elementos de la lista II descendientes.
Del mismo modo, también se puede pasar un elemento:
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');
El resultado de esta llamada es que el proyecto 1 ha sido configurado con un fondo rojo.
