Selecione Nth irmão anterior em jQuery?
-
06-07-2019 - |
Pergunta
Eu estou tentando configurar meu seletor jQuery, mas eu não sei exatamente como eu preciso escrevê-lo.
Eu tenho uma lista não ordenada, que é algo como isto:
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li class="last">something</li>
</ul>
Agora eu sei que se eu quiser selecionar o último filho eu posso fazer isso usando um "ul li.last" ou "ul.li:last", mas dizem que se eu queria o segundo do último, ou terceiro, ou 20 ? Agora que eu faria isso?
Solução
Você pode usar eq
:
$('ul li').eq(X);
Onde X é um índice baseado em 0 de qual elemento você quer. Você também pode usar o forma selector :
$('ul li:eq(X)');
E você também pode conseguir um resultado semelhante usando nth-child
:
$('ul li:nth-child(X)');
A documentação tem a dizer sobre a diferença entre nth-child
e eq
:
Enquanto: eq (índice) corresponde apenas a um único elemento, isto combina mais de um: um para cada um dos pais com índice. Múltiplo para cada um dos pais com par, ímpar, ou equação. O índice especificado é uma indexada, em contraste com: Eq. (), Que se inicia em zero
Então, fazendo $('ul li').eq(19);
você terá a única 20º elemento correspondente da consulta (por isso, se há mais de uma lista no documento isso não vai tirar você "todas as crianças 19", enquanto $('ul li:nth-child(20)');
que você começa a 20ª indivíduo elemento correspondente lista de cada <ul>
no documento.
Editar :
Para fazer algo como "segundo a última", a maneira sensata de fazê-lo seria como:
var $ul = $('#mylist > li');
var $el = $ul.eq($ul.length-2);
Mas você provavelmente deve fazer uma verificação para se certificar de comprimento-2 não é inferior a 0.
Outras dicas
Você quer o terceiro do último?
var $ul = $("ul li");
$ul.find(":eq(" + Math.max(0, $ul.length - 3) + ")");
Breve explicação: O comprimento $ ul (que é um objeto jQuery) é a forma como muitos de Li são encontrados. Então você pode usar isso junto com o. ": Eq (n)" selector para obter a li no índice desejado
Eu costumava Math.max no caso, a lista era muito curto (menos de 3 de li).
Este também funcionará, mas obviamente não é a melhor maneira:
var $ul = $("ul li:last").prev().prev();
Para terceira e XX, você pode fazer ul li:eq(3)
e ul li:eq(20)
. Para segundo a última, você pode ser capaz de fazer algo com nth-child
's equation
opção argumento, embora eu não tenho certeza.
alert($('ul li').eq(3).text());
Isso vai alertar o texto do terceiro item da lista.
O time jQuery adicionado esse recurso na versão 1.9
Você pode ler sobre ele em http://api.jquery.com/nth -última-criança-selector /