CODEWITHSUNDEEP
javascripthtmlcss
paulalexandru
paulalexandru

Reputation: 9530

Javascript detect if child of parent element has a class set

This is my code:

<div id="main">
    <div class="myclass"></div>   
</div>

How can I detect if inside of maindiv there is an element with myclass set?

PS. Vanilla JS, no jQuery

Upvotes: 10

Views: 24076

Answers (3)

Maik Lowrey
Maik Lowrey

Reputation: 17556

classList

There are multiple ways to achieve this. One very nice solution is to use the classList Method contains. https://developer.mozilla.org/de/docs/Web/API/Element/classList

querySelector

But I would prefer querySelector because you can easily check if the querySelector finds an element. (If it doesn't, then querySelector returns null)

function checkOne() {
  const check = document.querySelectorAll('#main > div');
  const res = [];
  check.forEach(e => {
    if (e.classList.contains('myclass') ) {
      res.push(true);
    }
  })
  return res.length > 0 ? true : false;  
}

function checkTwo() {
  const check = document.querySelector('#main .myclass');
  return check  ? true : false;
}

console.log("checkOne", checkOne());
console.log("checkTwo", checkTwo());
<div id="main">
  <div class="hello">1</div>   
  <div class="myclass">1</div>   
  <div class="world">1</div>   
</div>

Upvotes: 1

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

The below code searches for any element with a class inside a parent using querySelectorAll():

if (document.querySelectorAll("#main .myclass").length > 0) 
{
  console.log("#main has .myclass inside");
}
else 
{
  console.log("#main has no .myclass inside");
}
<div id="main">
    <div class="myclass"></div>   
</div>

Upvotes: 12

Ionut Necula
Ionut Necula

Reputation: 11472

You can use:

if(document.getElementById('main').getElementsByClassName('myclass')[0]) {
  alert('class found'); 
}else{
  alert('class not found'); 
}
<div id="main">
    <div class="myclass"></div>   
</div>

Upvotes: 1

Related Questions