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

Question

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?

Answer 1

You can use jQuery :has() pseudo-class selector.

 $('div:has(li.active)').css('background-color', 'green') 

 <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> 

---

Or use filter() method in jQuery.

 $('div').filter(function() { return $('li.active', this).length; }).css('background-color', 'green') 

 <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> 

---

With pure JavaScript you can do something like this.

 // select all elements and convert into an array // for iterating over the elements // for older browser use [].slice.call(....) // for newer browser it supports forEach over // NodeList as well Array.from(document.querySelectorAll('div')) // iterate over the elements .forEach(function(ele) { // check particular element exist inside if (ele.querySelector('li.active')) // if exist then add background color ele.style.backgroundColor = 'green'; }); 

 <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> 

Answer 2

 $(document).ready(function(){ $("ul.myClass li.active").closest("div").css("background-color", "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> 

Answer 3

First off, your css is off--it should be

<div style="background-color: red">

Then, (in jQuery):

$('ul.myClass li.active').css('background-color', 'blue');

JSFiddle

Answer 4

 if($(".myClass li").hasClass("active")){ $("div").css("background","red"); } 

 <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> 

Answer 5

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>