Como obter o enésimo elemento jQuery

311

No jQuery, $("...").get(3)retorna o terceiro elemento DOM. Qual é a função para retornar o terceiro elemento jQuery?

jquery Sam Lee
fonte

Respostas:

310

Por que não procurar primeiro na página (curta) dos seletores?

Aqui está: o :eq()operador. É usado exatamente como get(), mas retorna o objeto jQuery.

Ou você pode usar a .eq()função também.

Dykam
fonte
23
Isso não deveria ser em .eq()vez de :eq()?
RubenGeert
15
Sim, .eq()é mais apropriado para a pergunta do OP. :eq()é usado dentro do parâmetro string para $, enquanto que .eq()é um método em um objeto jQuery existente.
precisa saber é o seguinte
55
Eu juro que tenho que ir e procurar isso a cada . solteiro . hora .
ivarni
3
@JoelWorsham Depende do comportamento desejado. $('select').find('option').eq(n)basicamente ignorará o agrupamento e obterá todas as opções como um todo. Se você quiser por grupo, algo como isto é necessário:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
Dykam 30/01/15
4
"Por que não procurar primeiro na página (curta) dos seletores?" - Porque "eq" é um nome muito ruim e eu regularmente apenas ignorá-lo como eq para mim significa comparação ....
mmlac
309

Você pode usar o seletor : eq , por exemplo:

$("td:eq(2)").css("color", "red"); // gets the third td element

Ou a função eq (int) :

$("td").eq(2).css("color", "red");

Além disso, lembre-se de que os índices são baseados em zero.

CMS
fonte
7
Como sinônimo, você também pode usar o :nth()seletor - para não confundir com:nth-child()
user123444555621
A melhor resposta e não editada 3 anos após o fato :) #
Andrew Andrew
obrigado por realmente explicando como usar o seletor / função
Joseph Rogers
49

se você tiver controle sobre a consulta que cria o objeto jQuery, use :eq()

$("div:eq(2)")

Se você não tiver controle sobre ele (por exemplo, ele está sendo passado de outra função ou algo assim), use .eq()

var $thirdElement = $jqObj.eq(2);

Ou se você quiser uma seção deles (digamos, o terceiro, quarto e quinto elementos), use .slice()

var $third4th5thElements = $jqObj.slice(2, 5);
nickf
fonte
Estava procurando fatia, mas não tinha certeza de como pesquisar. Obrigado por ir além do que é necessário na pergunta original.
precisa saber é o seguinte
4
Para as pessoas que tropeçam sobre esta resposta, um ponto útil a notar é que o selector de nth-child é um baseado enquanto: eq ou .eq () são 0 baseado
Sudhanshu Mishra
1
Você deve usar em .eq()vez de :eq()realmente. Leve aumento de desempenho.
Qwerty
13

Eu acho que você pode usar isso 

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

Ele encontra o segundo li em cada ul correspondente e o anota.

JoenasE
fonte
11

.eq () -Um número inteiro indicando a posição baseada em 0 do elemento.

Ex:

Considere uma página com uma lista simples:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

Podemos aplicar esse método ao conjunto de itens da lista:

$( "li" ).eq( 2 ).css( "background-color", "red" );

Para mais informações: .eq ()

tilak
fonte
3

Se você já possui o objeto jquery em uma variável, também pode tratá-lo como uma matriz indexada normal, sem o uso do jquery:

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

Embora o exemplo acima não seja útil, ele representa como você pode tratar objetos criados pelo jquery como matrizes indexadas.

Au.Merci
fonte
Direita, e mais uma (espero útil) dica: Se linha contém uma lista de <select>elementos, e você quer o elemento combobox selecionado, uso$(row).val();
Matt
2

Se eu entendi sua pergunta corretamente, você sempre pode agrupar a função get da seguinte maneira:

var $someJqueryEl = $($('.myJqueryEls').get(3));
user1205577
fonte
3
Esta é apenas a "maneira mais difícil" e é isso que eq()você oferece gratuitamente.
Caumons
1

Se você deseja buscar um elemento / nó ou tag em loop específico, por exemplo,

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

Portanto, a partir do código acima, o loop é executado e queremos que um campo específico seja selecionado. Temos que usar a seleção jQuery que pode selecionar apenas o elemento esperado do loop acima, para que o código seja

$('.weekdays:eq(n)');

por exemplo

$('.weekdays:eq(0)');

bem como por outro método

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

mas o primeiro método é mais eficiente quando HTML <tag>possui um nome de classe exclusivo.

NOTA: O segundo método é usado quando não há nome de classe no elemento ou nó de destino.

para mais, siga https://api.jquery.com/eq/

Vrushal Raut
fonte
0

Para iterações, o uso de um seletor não parece fazer nenhum sentido:

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

fonte
0

Exemplo ao vivo para acessar e remover o elemento enésimo com jQuery:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

Quando executado, há dois itens na lista ordenada que mostram Primeiro e Terceiro. O segundo estava escondido.

Eric Leschinski
fonte
PS: A contagem começa em 0; O primeiro está no índice 0, o segundo está no índice 1 e assim por diante ...
KNU
0 
 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>
Sanjay Verma
fonte
"$ (function () {" primeiro do outono, eu criei uma função anônima, que foi disparada automaticamente. Dentro disso, encontrei três divs pais usando irmãos. Então iteramos em todos os 3 divs pais e verificamos o comprimento de todos os filhos. como posso identificar que se é um último div ou não em div pai agora estou alertando o último html div em cada 3 principal div pai..
Sanjay Verma
Você pode editar sua resposta, em vez de dar informações em comentários :)
T3 H40