TransWikia.com

Selecionar uma div sem ela ter uma class ou um id?

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>

3 Answers

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

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

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP