18

Lembrei que existe uma função no jQuery chamada de filter. Eu já conheço o find, mas quero saber se existe alguma diferença entre eles ou se são a mesma coisa.

4 Respostas 4

13

Diferença

  • find encontra os elementos que atendem à expressão solicitada que sejam descendentes do seletor.

  • filter, por outro lado, filtra e devolve todos os elementos que coincidam com o seletor e também a expressão filtrada.

Exemplo

No exemplo abaixo, um $('div').filter('.teste') vai encontrar o Bloco 1 e o Sub 3, pois ambos são divs que atendem o filtro pela classe teste.

Por sua vez, um $('div').find('.teste') vai encontrar apenas o Sub 3, pois apenas dentro do seletor div do "Bloco 2" há um descendente cuja classe é teste.

<div class="teste">
   Bloco 1
   <div class="limao">Sub 1</div>
   <div class="trevo">Sub 2</div>
</div>

<div class="pardo">
   Bloco 2
   <div class="teste">Sub 3</div>
   <div class="peixe">Sub 4</div>
</div>

Clique aqui para ver um exemplo no JSFiddle.

3
  • Você pode ter dois ou mais elementos com o mesmo id?! Sempre que eu fiz isso [acidentalmente] o browser simplesmente ignorou um deles, levando a todo tipo de bug. Ou tem algo que não estou enxergando?
    – mgibsonbr
    5/02/2014 às 0:35
  • 1
    @mgibsonbr O correto não é usar dois IDs nunca, na verdade. Por outro lado, para efeitos de DOM e JQuery não dá problema (inclusive se você experimentar inventar tags e atributos totalmente fora do padrão ele funciona bem). Talvez pra fins de "didática de SO" seja o caso de eu trocar por class, aproveitando que vou fazer um exemplo melhor no jsfiddle.
    – Largato
    5/02/2014 às 0:45
  • @mgibsonbr Fiz a troca, concordo que é melhor não dar margem pra confusão mesmo.
    – Largato
    5/02/2014 às 1:08
6

A função do find é buscar elementos descendentes daquele(s) selecionado(s), enquanto a função do filter é criar um subconjunto dos próprios elementos. Exemplo:

<div id="div1" class="a top">
  <div id="sub1" class="b"></div>
  <div id="sub2" class="b"></div>
  <div>
      <div id="sub3" class="b"></div>
  </div>
</div>
<div class="b top"></div>
<div class="b top"></div>
<div id="div2" class="a top"></div>
<div id="div3" class="a top"></div>

O seguinte código pega sub1, sub2 e sub3:

$("#div1").find(".b");

Já o seguinte código pega div1, div2 e div3:

$(".top").filter(".a");

Uma maneira alternativa de se invocar o filter é passando uma função como argumento, em vez de um seletor. Isso permite que você execute alguma lógica mais complicada ao escolher se determinado elemento vai entrar ou não no subconjunto requisitado:

$(".top").filter(function(indice) {
    var elemento = this, $elemento = $(this);
    return ...; // Se true, o elemento entra no resultado.
});
5
  • mas uma dúvida, então filter é igual a is?
    – Iago Bruno
    5/02/2014 às 0:05
  • 3
    @IagoBruno Não exatamente, o .is verifica se algum elemento satisfaz a condição, retornando true (e potencialmente parando o trabalho por aí, sem consultar o resto). Se nenhum deles satisfaz, retorna false. O filter passa por todos os elementos, e retorna uma nova lista (i.e. um novo objeto jQuery) contendo somente os elementos que satisfizeram a condição (ou a lista vazia se nenhum satisfaz).
    – mgibsonbr
    5/02/2014 às 0:09
  • ah ta \o/ e mais uma coisa rsrs, para que serve o addBack?
    – Iago Bruno
    5/02/2014 às 0:14
  • @IagoBruno Aí já foge um pouco do meu conhecimento. addBack, andSelf, end etc mexem numa coisa que o jQuery chama de "stack" (pilha [de conjuntos]), e que muda cada vez que você chama um método no objeto jQuery. O assunto é complexo, vale a pena uma pergunta separada para isso (aliás, acho que eu próprio vou fazer)
    – mgibsonbr
    5/02/2014 às 0:19
  • haha ok e que eu vi uma vez e não olhei para que serve, obrigado ^_^
    – Iago Bruno
    5/02/2014 às 0:24
4

Resumo fácil de entender usando exemplos:

$('div a') retorna o mesmo que $('div').find('a')

$('body .teste strong') retorna o mesmo que $('body').find('.teste').find('strong')

$('.minhaClasse span') retorna o mesmo que $('.minhaClasse').find('span')

$('.foo .bar') retorna o mesmo que $('.foo').find('.bar')


$('div:gt(0)') retorna o mesmo que $('div').filter(':gt(0)')

$('div:hidden') retorna o mesmo que $('div').filter(':hidden')

$('div[data-teste]') retorna o mesmo que $('div').filter('[data-teste]')

$('a[title]') retorna o mesmo que $('a').filter('[title]')

$('option:selected') retorna o mesmo que $('option').filter(':selected')

$('.foo.bar') retorna o mesmo que $('.foo').filter('.bar')


Percebeu a diferença?

O método filter reduz o seletor atual de acordo com um filtro, como um atributo (href, name, value, src, data-*, for, maxlength, action, etc.), uma pseudoclasse (:hidden, :visible, :hover, :active, :checked, :selected, :empty, etc), entre outros.

O método find serve para encontrar elementos descendentes do(s) selector(es) especificado(s).

3

O find procura nós dentro de um elemento, enquanto o filter filtra os nós selecionados com outro seletor.

$('div').find('p') procura parágrafos dentro de div's, enquanto $('div').filter('.a') seleciona apenas div's com a classe CSS "a".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .