-1

Eu gostaria de fazer o seguinte

<div id="teste">
  <div>Teste 1</div>
  <div>Teste 2</div> <---- Quero selecionar esta
  <div>Teste 3</div>
</div>

Como é que eu conseguiria selecionar aquela div?

Baseada na solução do @Guilherme Nascimento, eu usei o método dele neste jsfiddle mas não consegui o que pretendia.

Para elém disso, existe forma de eu selecionar ainda mais fundo?

<div id="teste">
  <div>Teste 1</div>
  <div>
     <img src="esta_nao.jpg" />
     <img src="teste_teste.jpg" /> <---- Quero selecionar esta
  </div>
  <div>Teste 3</div>
</div>
1
  • Você usou div::nth-child(3), mas é apenas um :, então deveria ser div:nth-child(3)
    – Syzoth
    21/02/2018 às 16:06

3 Respostas 3

4

Use o seletor :nth-child(), assim:

var elemento = $("#teste div:nth-child(2)");

console.log(elemento.text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="teste">
  <div>Teste 1</div>
  <div>Teste 2</div> <!-- Quero selecionar esta -->
  <div>Teste 3</div>
</div>

O nth-child é usado em CSS também, ou seja não é um seletor exclusivo jQuery e por isto estará disponivel para que usa JavaScript puro, por exemplo:

var elemento = document.querySelector("#teste div:nth-child(2)");

console.log(elemento.textContent);
<div id="teste">
  <div>Teste 1</div>
  <div>Teste 2</div> <!-- Quero selecionar esta -->
  <div>Teste 3</div>
</div>

O :nth-child pode selecionar pela ordem do filho, 1, 2, 3, 4, e assim por diante. Ele também pode selecionar mais de um elemento como elementos apenas impares ou pares, por exemplo:

  • :nth-child(2n+1) irá selecionar somente os elementos filhos impares
  • :nth-child(2n) irá selecionar somente os elementos filhos pares

Para ir mais afundo basta ajustar os filhos do seletor, use o seletor #teste > div > img:nth-child(<posição do filho>) para isto:

var elemento = $("#teste > div > img:nth-child(2)");

console.log(elemento.attr("src"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="teste">
  <div>Teste 1</div>
  <div>
     <img src="esta_nao.jpg" />
     <img src="teste_teste.jpg" /> <!-- Quero selecionar esta -->
  </div>
</div>

Ou então pode pegar por atributo src da imagem:

var elemento = $("#teste > div > img[src='teste_teste.jpg']");

console.log(elemento.attr("src"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="teste">
  <div>Teste 1</div>
  <div>
     <img src="esta_nao.jpg" />
     <img src="teste_teste.jpg" /> <!-- Quero selecionar esta -->
  </div>
</div>

Se desejar pegar imagens que terminem com teste_teste.jpg use "#teste > div > img[src$=teste_teste.jpg]", por exemplo isto seria pego também:

<img src="/foo/bar/teste_teste.jpg" />

Pois o cifrão $ vai pegar tudo que termina em teste_teste.jpg

Nota: o seletor > serve para indicar que o elemento deve ser filho direto do seletor anterior, então aqui #teste > div > img:

  • <img> deverá ser filho direto de <div>
  • <div> deverá ser filho direto de <(elemento) id="teste"></(elemento)> - usei (elemento) porque o # sem elemento indicado diz que qualquer elemento que contenha o id pode ter o filho > div a seguir, é claro que o atributo id= nunca pode ser repetido em HTML
9
  • 1
    Parece que pensamos na mesma solução, hehe!
    – Jorge.M
    21/02/2018 às 15:41
  • 1
    Pensei também nesse método mas não tinha arranjado forma de o pôr, vou testar e dou mais informações. 21/02/2018 às 15:42
  • Resultou! Muito boa explicação. 21/02/2018 às 15:43
  • Lembrando que para selecionar os impares e pares podemos usar também :nth-child(odd) e :nth-child(even)
    – Jorge.M
    21/02/2018 às 15:43
  • 1
    @GuilhermeNascimento sim, muito bem detalhado. +1
    – Jorge.M
    21/02/2018 às 15:45
2

Da para fazer dessa forma:

$(document).ready(function(){
    
    $('#teste div:nth-child(2)').css('background-color','red');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">
  <div>Teste 1</div>
  <div>Teste 2 selecionada</div> <!--<---- Quero selecionar esta-->
  <div>Teste 3</div>
</div>

2

Você pode selecionar pelo texto que ela contém (todo ou parte):

$("#teste div:contains('Teste 2')").css("color","red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">
  <div>Teste 1</div>
  <div>Teste 2</div>
  <div>Teste 3</div>
</div>

1
  • Método diferente e funcional. +1 :)
    – Jorge.M
    21/02/2018 às 15:53

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 .