How to get control in <li> tag inside <ul> tag by JavaScript?

This is my code,

<div style="background-color:red;">
   <ul class="myClass">
      <li> CCD </li>
      <li class="active"> BCA </li>
      <li> ABC </li>
   </ul>
</div

I want to change div color automatically when there is class="active". How to get the li class, when I only have class for ul, and how to change this div background color with javascript?

Answers 1

  • Using vanilla JS

    var divs = document.getElementsByTagName("div")
    
    for (var i = 0; i < divs.length; i++) {
     // get all child nodes inside divs
     var children = divs[i].getElementsByTagName("*");
     
     for (var j = 0; j < children.length; j++){
      if(children[j].className === "active"){
        children[j].style.backgroundColor = 'blue';
      }
     }
     
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div style="backgroundColor='red'">
      <ul class="myClass">
        <li>CCD</li>
        <li class="active">BCA</li>
        <li>ABC</li>
      </ul>
    </div>


Related Articles