CODEWITHSUNDEEP
javascripthtml
user1543784
user1543784

Reputation: 363

JavaScript - How to target nested (child) div within a div which was passed using "this"?

I am trying to change classes of a container div element and few div elements nested within it, when clicked on the container div. I can successfully change the class of container element (case_study_section), but don't know how to target the nested (child) div elements (case_study_images, case_study_image1,..). Please help.

P.S.: I need to add different classes to different child elements. So will hvae to target them separately.

function expandCollapse(case_study_section) {
  var sectionClasses = case_study_section.classList;
  
	var imagesClasses = case_study_section.getElementsByClassName('case_study_images').classList;

  if (sectionClasses.contains("collapsed_section")) {
    sectionClasses.remove("collapsed_section");
    sectionClasses.add("expanded_section");
  } else {
    sectionClasses.remove("expanded_section");
    sectionClasses.add("collapsed_section");
  }
}
.case_study_section {
  width: 100px;
  height: 100px;
}

.collapsed_section {
  background-color: #ff0000;
}

.expanded_section {
  background-color: #000000;
}
<div class="case_study_section collapsed_section" onClick="expandCollapse(this)">

  <div class="case_study_images collapsed_images">

    <div class="case_study_image1">
    </div>

    <div class="case_study_image2">
    </div>

    <div class="case_study_image3">
    </div>

  </div>

</div>

Upvotes: 0

Views: 1373

Answers (3)

philipp
philipp

Reputation: 16515

Well if you have the parent are looking for some children you can:

var elements = case_study_section.querySelectorAll('.case_study_images');

Array.from(elements).forEach(function (child) {
  child.classList.add('a-class');
})

Just use a regular css selector.

If you need to add different classes to different children you can:

//somehow map the selector to the classes
//here the object key is the selector,
//the value the classes
var map = {
  '.case_study_image1': ['a-class', 'b-class'],
  '.case_study_image2': ['c-class']
};

//iterate over the keys
Object.keys(map).forEach(function (selector) {
      //get the classes
  var classes = map[selector],
      //get the element
      element = case_study_section.querySelector(selector),
      //get the classList
      cl = element.classList;

  //apply all at once
  cl.add.apply(cl, classes);
});

Upvotes: 1

prasanth
prasanth

Reputation: 22500

Try with children

  case_study_section.getElementsByClassName('case_study_images')[0].children

Or x.getElementsByClassName()\[0\]

 case_study_section.getElementsByClassName('case_study_images')[0].getElementsByClassName('images classname')[0]


function expandCollapse(case_study_section) {
  var sectionClasses = case_study_section.classList;
  
	var imagesClasses = case_study_section.getElementsByClassName('case_study_images').classList;
  
  console.log(case_study_section.getElementsByClassName('case_study_images')[0].children)

  if (sectionClasses.contains("collapsed_section")) {
    sectionClasses.remove("collapsed_section");
    sectionClasses.add("expanded_section");
  } else {
    sectionClasses.remove("expanded_section");
    sectionClasses.add("collapsed_section");
  }
}
.case_study_section {
  width: 100px;
  height: 100px;
}

.collapsed_section {
  background-color: #ff0000;
}

.expanded_section {
  background-color: #000000;
}
<div class="case_study_section collapsed_section" onClick="expandCollapse(this)">

  <div class="case_study_images collapsed_images">

    <div class="case_study_image1">
    </div>

    <div class="case_study_image2">
    </div>

    <div class="case_study_image3">
    </div>

  </div>

</div>

Upvotes: 0

Jonathan
Jonathan

Reputation: 177

You can try using var children = this.getElementsByTagName("div").getElementsByTagName("div") and then do stuff with the elements returned by that

Upvotes: 0

Related Questions