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 ne­ces­si­dade de realizar iterações manuais complexas.

O que é jQuery.find()?

Ao aplicar o método jQuery.find() a um objeto jQuery, você con­se­guirá localizar elementos dentro deste. Essa busca é feita de forma recursiva, ou seja: não somente os filhos diretos dos elementos se­le­ci­o­na­dos 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 en­con­tra­dos — esse objeto pode ser ma­ni­pu­lado 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 in­te­gra­ção do jQuery com o WordPress permite que você encontre objetos fa­cil­mente 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 en­con­tra­dos por meio de seletores jQuery adi­ci­o­nais; 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 ini­ci­an­tes do nosso Digital Guide.

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

Nos exemplos que seguem, mos­tra­re­mos 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, uti­li­za­mos a função jQuery.find(element) para localizar todos os botões no elemento <div> com o ID container e adicionar a classe selected.