Stack Overflow em Português Asked by I_like_trains on September 7, 2020
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>
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 paresPara 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 oid
pode ter o filho> div
a seguir, é claro que o atributoid=
nunca pode ser repetido em HTML
Correct answer by Guilherme Nascimento on September 7, 2020
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>
Answered by Sam on September 7, 2020
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>
Answered by Jorge.M on September 7, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP