jQuery.find(): encontrar elementos en el DOM

jQuery.find() es una función esencial de Ja­va­S­cri­pt que permite buscar elementos es­pe­cí­fi­cos en el DOM, como etiquetas HTML, clases o IDs, sin tener que recurrir a ite­ra­cio­nes manuales que pueden resultar tediosas.

¿Qué es el método jQuery.find()?

jQuery.find() se utiliza en un objeto jQuery es­pe­cí­fi­co para localizar elementos dentro de ese objeto. La búsqueda se realiza de forma recursiva, lo que significa que no solo se buscan los hijos directos de jQuery.find(parent), sino que también se examinan todos los elementos anidados en el árbol del DOM. El resultado es un nuevo objeto jQuery que contiene todos los elementos en­co­n­tra­dos, pe­r­mi­tié­n­do­te ma­ni­pu­lar­los o usarlos como base para otras ope­ra­cio­nes. Por ejemplo, puedes añadir una clase a los elementos con jQuery.addClass() o insertar otros elementos con jQuery.append(). Además, jQuery en WordPress si­m­pli­fi­ca la búsqueda de objetos en tu sistema de gestión de co­n­te­ni­dos (CMS).

¿Cómo es la sintaxis del método jQuery.find()?

El método jQuery.find() tiene la siguiente es­tru­c­tu­ra:

$(selector).find(filter)

• filter: es un parámetro opcional y se utiliza para refinar aún más la selección de elementos en­co­n­tra­dos mediante se­le­c­to­res adi­cio­na­les en jQuery, por ejemplo, jQuery.find(class) o jQuery.find(id)

Si quieres aprender más sobre los se­le­c­to­res, su sintaxis y sus funciones, puedes consultar nuestro tutorial de jQuery.

Ejemplos de uso de jQuery.find()

A co­n­ti­nua­ción, te mostramos diversos ejemplos de filtros que puedes utilizar con jQuery.find():

// Buscar todos los elementos <a> que hay dentro de un elemento <div> con la clase "contenedor"
$('.container').find('a');
// Buscar los elementos <li> que hay dentro de un elemento <ul> con el ID "myList"
$('#myList').find('li');
// Buscar todos los elementos <input> que hay dentro de un elemento <form> y filtrar por el tipo "text"
$('form').find('input[type="text"]');

También puedes combinar jQuery.find() con otras funciones de jQuery de manera eficaz:

$("div#container").find("button").addClass("selected");

Uti­li­za­mos jQuery.find(element) para se­le­c­cio­nar todos los botones dentro del elemento <div> con el ID “container” y les asignamos la clase “selected”.