<div> <card class="card-class"> <header class="header-class">Title 1</header> </card> <div>Stuff</div> <card class="card-class"> <-- This one <header class="header-class">Title 2</header> </card> <div>More stuff?</div> <card class="card-class"> <header class="header-class">Title 3</header> </card> </div> Me gustaría sacar el elemento DOM como se indica en el ejemplo usando 2 condiciones. El elemento dom que me interesa tiene una clase card-class y en algún lugar dentro de este elemento DOM hay un elemento con clase header-class que tiene un título dentro.
Necesito obtener una tarjeta en particular POR el texto del título. Entonces, en este ejemplo, quiero el elemento de tarjeta con 'Título 2'. ¿Hay alguna forma de lograr esto con solo un selector en lugar de javascript?
No estoy seguro de que sea posible con una sola línea, pero aquí hay una alternativa:
Primero obtienes todas las "clases de encabezado", que son descendientes de "clases de tarjetas". Luego los recorre en busca del título solicitado. Y por último accedes al componente padre, que es la tarjeta que buscas.
const cards = document.querySelectorAll(".card-class .header-class"); for (let card of cards) { if (card.innerHTML === "Title 2") { let cardYouAreLookingFor = card.parentElement; console.log(cardYouAreLookingFor); } }Espero que esto ayude. ¡Salud!
La única forma posible en que puedo ver que esto funcione con una línea es si agrega un atributo de datos al elemento y luego lo apunta.
const title2 = document.querySelector('.header-class[data-title="Title 2"]'); console.log(title2.textContent); <div> <card class="card-class"> <header class="header-class" data-title="Title 1">Title 1</header> </card> <div>Stuff</div> <card class="card-class"> <header class="header-class" data-title="Title 2">Title 2</header> </card> <div>More stuff?</div> <card class="card-class"> <header class="header-class" data-title="Title 3">Title 3</header> </card> </div>