jQuery.find(): Como localizar elementos no DOM

Com o método jQuery.find(), você torna-se capaz de buscar tags HTML, classes e IDs de modo preciso, sem a necessidade de realizar iterações manuais complexas.

O que é jQuery.find()?

Ao aplicar o método jQuery.find() a um objeto jQuery, você conseguirá localizar elementos dentro deste. Essa busca é feita de forma recursiva, ou seja: não somente os filhos diretos dos elementos selecionados são buscados, como também todos os elementos aninhados na árvore DOM. Como resultado, você obtém um novo objeto jQuery contendo todos os elementos encontrados — esse objeto pode ser manipulado ou servir de base para outras operações. Por exemplo, você pode adicionar uma classe ao objeto com jQuery.addClass() ou anexar outros elementos a ele com jQuery.append(). Além disso, a integração do jQuery com o WordPress permite que você encontre objetos facilmente nesse CMS.

Sintaxe do método jQuery.find()

O método jQuery.find() tem a seguinte estrutura básica:

$(selector).find(filter)

• filter: Parâmetro opcional, usado para filtrar, com mais precisão, elementos encontrados por meio de seletores jQuery adicionais; por exemplo, jQuery.find(id) e jQuery.find(class).

Se você quer aprender mais sobre seletores, suas notações e funções, dê uma olhada no tutorial de jQuery para iniciantes do nosso Digital Guide.

Exemplos de uso do método jQuery.find()

Nos exemplos que seguem, mostraremos a variedade de seletores que você pode usar como filtro no método jQuery.find():

// Buscar todos os elementos <a> dentro de um elemento <div> com a classe "container"
$('.container').find('a');
// Buscar elementos <li> dentro de um elemento <ul> com o ID "myList"
$('#myList').find('li');
// Buscar todos os elementos <input> dentro de um elemento <form> e filtrar pelo tipo "text"
$('form').find('input[type="text"]');

Também é possível combinar o método jQuery.find() com outras funções:

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

No exemplo acima, utilizamos a função jQuery.find(element) para localizar todos os botões no elemento <div> com o ID container e adicionar a classe selected.