I have a task where Jquery is not working, so I need a workaround to perform an add class event to child element of a div upon click event. How do I go about that. The Jquery for that purpose would be

$('.wpb_vc_column').click(function(e) {
  alert();
  e.preventDefault();
  $(this).find('.vc_controls').addClass('show-controls');
});

.show-controls {
  color: red
}

<script src=".1.1/jquery.min.js"></script>
<div class="wpb_vc_column">
  <div class="vc_controls">SomeThing</div>
</div>

I have a task where Jquery is not working, so I need a workaround to perform an add class event to child element of a div upon click event. How do I go about that. The Jquery for that purpose would be

$('.wpb_vc_column').click(function(e) {
  alert();
  e.preventDefault();
  $(this).find('.vc_controls').addClass('show-controls');
});

.show-controls {
  color: red
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpb_vc_column">
  <div class="vc_controls">SomeThing</div>
</div>

Its basically a wordpress backend thing which need to be workable on mobile devices.

Regards

• javascript
• jquery

• 1 I copy paste the source just adding the e and it looks ok – guradio Commented May 16, 2018 at 6:15
• No I cannot use Jquery, I m working on a plugin called "Visual Composer" in the backend of wordpress pages. and Jquery is not supported there. so I need to do this via plain JS only – Anup Gupta Commented May 16, 2018 at 6:18
• Consider adding that information to the question, otherwise it reads like you want to use jQuery but can't make it work, in which case the answer is either use plain JavaScript (as you want) or making jQuery work (which you don't). – David Thomas Commented May 16, 2018 at 6:31
• wordpress does suppport jquery. you need to use jQuery instead of $. try below code jQuery ('.wpb_vc_column').click(function(e) { alert(); e.preventDefault(); jQuery (this).find('.vc_controls').addClass('show-controls'); }); or you can wrap your function in anonymous functoin (function($) { // $ Works! You can test it with next line if you like // console.log($); })( jQuery ); – Sumit Parkash Commented May 16, 2018 at 6:32

4 Answers 4

You can use querySelectorAll() to select all the elements with class wpb_vc_column and associate the click event to each element. Then click on these element will find the child elements with class vc_controls and add the class to it.

function clickedColumn(e){
    e.preventDefault();
    if(this.querySelector('.vc_controls')){
      this.classList.add('show-controls');
    }
}
document.querySelectorAll('.wpb_vc_column').forEach(function(el){
  el.addEventListener('click', clickedColumn);
});

.show-controls{
  color:red;
}

<div class="wpb_vc_column">
  <div class="vc_controls">SomeThing 1</div>
  <div class="vc_controls">SomeThing 2</div>
</div>

var myEle = document.getElementsByClassName('vc_controls');
myEle.className = "show-controls";

make use of querySelector method and and search for child in parent element

el.querySelector("#child").className = 'show-controls';
or  
el.querySelector('.vc_controls').className = 'show-controls';

function changeClass(element){
var get_vc_controls=element.getElementsByClassName('vc_controls');
get_vc_controls[0].className='show-controls';
}

.show-controls {
  color: red
}

<div class="wpb_vc_column" style="border:1px solid;" onclick="changeClass(this)">
  <div class="vc_controls">SomeThing</div>
</div>