Estoy creando un sitio web y necesito acceder a un elemento con un nombre de clase específico de otro elemento, pero he usado este nombre de clase dentro de otros grupos.
<div class="1"> Object 1 <div class="hair">Black</div> </div> <div class="2"> Object 2 <div class="hair">Brown</div> </div> <div class="3"> Object 3 <div class="hair">Red</div> </div>¿Cómo accedería al cabello solo para el Objeto 3?
¿Podría alguien proporcionar una solución? ¡Muchas gracias!
Si necesita acceder a este elemento con CSS, simplemente puede usar la clase principal.
.3 .hair{}Si está intentando obtener este objeto en JS, tiene dos opciones. El primero es usar vanilla js.
//+ES6 document.querySelector(".3 .hair").innerText; //Red //--------- //vanilla js document.getElementsByClassName("3")[0].getElementsByClassName("hair")[0].innerText; //RedLa segunda opción es jQuery. Es como usar el selector de consultas.
$(".3 .hair").text(); //RedPuedes escribir la clase de padres antes que el niño.
const el = document.querySelector(".3 .hair")Puede usar la clase principal ya que son únicos:
.three > .hairTenga en cuenta:
En CSS, los identificadores (incluidos los nombres de los elementos, las clases y los ID en los selectores) solo pueden contener los caracteres [a-z0-9] y los caracteres ISO 10646 U+00A1 y superiores, más el guión (-) y el guión bajo (_) ; no pueden comenzar con un dígito o un guión seguido de un dígito
Manifestación:
let thirdEl = document.querySelector('.three > .hair'); console.log(thirdEl.textContent) <div class="one"> Object 1 <div class="hair">Black</div> </div> <div class="two"> Object 2 <div class="hair">Brown</div> </div> <div class="three"> Object 3 <div class="hair">Red</div> </div>