4

Estou realizando alguns testes para entender qual é a diferença do uso simples de um seletor eq() e find(), para poder selecionar a primeira linha de uma tabela por exemplo.

Exemplo 1:

$('table tbody tr:first') // ok

$('table tbody tr').find(':first'); // errado - pega todos os elementos da tr

$('table tbody').find('tr:first'); // ok

Nesses 3 testes percebi que para o find() funcionar é necessário o mesmo estar acompanhado com uma tag, se eu quero criar uma variável e armazenar esse seletor, como poderei acessar os objetos desse elemento pelo seletor find()?

Exemplo 2:

var $tab = $('table tbody tr');
$tab.find(':first'); // errado, fica no mesmo jeito do exemplo acima.

Detalhe, descobri que pode ser acessado por eq():

Exemplo 3:

$tab.eq('0'); // ok

O exemplo 3 resolve o meu problema, mas tem alguma forma de faze-lo funcionar utilizando o exemplo 2?

Quais são as diferenças do seletor eq() e find() , além de saber que eq() deve ser informado o index exato onde esta a informação e o find() procura por um item correspondente?

Pela lógica de como elas funcionam parece que eq() possui maior desempenho, não que seja algo significativo diante do processo, mas existe muita diferença ?

1

2 Respostas 2

5

Esses dois métodos fazem coisas diferentes.

O .eq() seleciona elementos dentro de uma coleção, o .find() seleciona elementos nos filhos de elementos de uma coleção.

Ou seja um procura em elementos já selecionados (horizontalmente) e o outro na descendencia (transversalmente).

Pode exemplo:

<div>
    <p>Div A</p>
</div>
<div>
    <p>Div B</p>
</div>
<div>
    <p>Div C</p>
</div>

e no jQuery:

var divs = $('div');

via .eq() é possivel selecionar uma das <div> mas não a descendência.
via .find() é possivel selecionar os elementos <p> mas não uma <div>.

Combinando os dois seria por exemplo:

var divB = $('div').eq(1).find('p').html(); // Div B
1
  • 1
    Acho que é a resposta correta, sobre o problema dos resultados inesperados. Melhorei a resposta e corrigi o detalhe mencionado. Obrigado!
    – Syzoth
    15/10/2015 às 18:56
4

Em uma curta resposta, existem muitas maneiras de se fazer uma mesma tarefa, basicamente a diferença é que:

  • eq() usa o numero de index do vetor da seleção.
  • filter() filtra os itens da seleção
  • find() usa um sub-seletor pra filtrar (busca os elementos filhos).

O motivo disto é que tem momentos que você poderá usar um loop for ou while pra trabalhar a sua maneira o eq, no entanto se existir um seletor (ou combinação de seletores) que façam o serviço então deves usar .filter e então eq pode ser dispensável.

Usara apenas find quando for buscar os nodes "filhos" e "netos".

O mais importante é que existem muitas maneiras de se fazer uma mesma tarefa, isto é uma característica da programação, vai depender de onde e quando você vai usar e cada função será usada em uma necessidade especifica.

Sobre desempenho

Provavelmente eq() tem melhor performance, mas quando você trabalhar o teu loop pra extrair apenas o que interessar então o tempo gasto no final talvez seja o mesmo, a performance varia muito de onde, como e quando você vai usar, por exemplo a estrutura do html pode afetar por exemplo, a única maneira de ter certeza é você fazendo os testes.

Como testar a performance

Existem algumas ferramentas online um exemplo é o https://jsperf.com, eu pessoalmente já usei, segue um exemplo:

2
  • jsperf.com/eq-vs-find 15/10/2015 às 17:12
  • @GabrielRodrigues como eu disse vai da necessidade, no exemplo que postou você usou for com find o que é desnecessário e o que claramente irá deixar mais lento, já que usamos o find pra ser mais específicos e o .eq quando necessitamos nós mesmos pegarmos algo que seletores não são capazes.
    – Syzoth
    15/10/2015 às 17:25

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 .