How to get control in
tag inside
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?

This active class is from image slider that using javascript, so i think use javascript is better — Kevin Rhema Akhwilla, Oct 31 '17 at 04:39
@KevinRhemaAkhwilla That doesn’t make any sense. If you set a class by JavaScript, then CSS is the _optimal_ way to change its style. By the way, have you noticed that your `style` syntax is incorrect yet? — Sebastian Simon, Oct 31 '17 at 04:41
That's not the reason. Actually, you can't use CSS here because you're trying to target the parent of an element you can select (something that would mean `the div parent of ul.myClass > li`, but [there's no such thing yet in CSS](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) ) — aurelienshz, Oct 31 '17 at 04:42
But in general, anything else than this kind of edge case is much more performant and easier to maintain when implemented using CSS instead of manipulating the DOM with Javascript. Also, as Xufox said, your first line should probably be `
`. You have to use CSS syntax here, not javascript styles syntax. — aurelienshz, Oct 31 '17 at 04:44

Pranav C Balan · Accepted Answer · 2017-10-31T04:43:45.610

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>

score 0 · Answer 2 · answered Oct 31 '17 at 04:33

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

score 0 · Answer 3 · answered Oct 31 '17 at 04:36

0

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

answered Oct 31 '17 at 04:36

Samyok Nepal

514
3
12

score 0 · Answer 4 · answered Oct 31 '17 at 04:37

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>

score 0 · Answer 5 · answered Oct 31 '17 at 05:00

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>

How to get control in tag inside tag by JavaScript?

5 Answers5

How to get control in
tag inside
tag by JavaScript?