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
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 div
s 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.
-
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? 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.– Square Obama ♦5/02/2014 às 0:45
-
@mgibsonbr Fiz a troca, concordo que é melhor não dar margem pra confusão mesmo.– Square Obama ♦5/02/2014 às 1:08
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.
});
-
-
3@IagoBruno Não exatamente, o
.is
verifica se algum elemento satisfaz a condição, retornandotrue
(e potencialmente parando o trabalho por aí, sem consultar o resto). Se nenhum deles satisfaz, retornafalse
. Ofilter
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). 5/02/2014 às 0:09 -
-
@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) 5/02/2014 às 0:19 -
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).
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".