<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>
I would like to pull out the DOM element as noted in the example using 2 conditions. The dom element I am interested in has a class card-class and somewhere inside this DOM element there is an element with class header-class which has a title inside.
I need to get a particular card BY the title text. So in this example I want the card element with 'Title 2'. Is there any way to ahcieve this with just a selector rather than javascript?
Not sure it´s possible with a one-liner, but here is an alternative:
First you get all the "header-class", that are descendant of "card-class". Then you loop through them looking for requested title. And finally you access the parent component, which is the card you are looking for.
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);
}
}
Hope this helps. Cheers!
The only possible way I can see this working with one line is if you add a data attribute to the element, and then target that.
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>