CODEWITHSUNDEEP
javascript
vaibhav
vaibhav

Reputation: 784

How to get the specific child element from the the parent element in javascript

Hi I am using javascript in my project and certainly new to it, In a certain scenario, I want to get the child element's ID of a parent element, so that I can change the css class of that child only.

Code: 

 <div id="section_container" class="col-md-3 section_container " onclick="handler(this)">
        <div id="content" class="col-md-10 leftone ">Make a complaint</div>
        <div class="rightone  col-md-2">
            <img id="arrow" class="arrow-image">
        </div>
    </div>
    <div id="section_container" class="col-md-3 section_container ">
        <div id="content" class="col-md-10 leftone ">Make a complaint</div>
        <div class="rightone  col-md-2">
            <img id="arrow" class="arrow-image">
            <a href="www.google.com" ></a>
        </div>
    </div>
    <div id="section_container" class="col-md-3 section_container ">
        <div id="content" class="col-md-10 leftone ">Make a complaint</div>
        <div class="rightone  col-md-2">
            <img id="arrow" class="arrow-image">
        </div>
    </div>

Here, I am having three identical divs from which I am calling a javascript function handler, In handler I have written the code to change the classes if click on the section container

Problem :
since there are three identical element section_container, I am unable to find that which element should get highlighted(css classes should be applied).

elements with ID : content arrow and section_container gets new clas.

Question: how to identify that only that divs get highlighted on which click has been registered.

Upvotes: 1

Views: 3000

Answers (5)

Jeeva
Jeeva

Reputation: 1057

function getSpecificChild(parent) {
    for (var i = 0; i < parent.children.length; i++) {
        if (parent.children[i].tagName.toLowerCase() === "button") {
            return el.children[i]
        }
    }
}

In this case I just use tagName to identify the button element, but you can use any other javascript identifier to get your child element

Upvotes: 0

Ishank
Ishank

Reputation: 2926

Yes ID has to be unique. I have used pure javascript w/o library

var elements = document.getElementsByClassName("section_container"),
  anIndex = 0;

if (elements && elements.length) {
  for (anIndex; anIndex < elements.length; anIndex++) {
    if (elements.hasOwnProperty(anIndex))
      elements[anIndex].addEventListener("click", cHandler);
  }
}

function cHandler(event) {
  for (anIndex = 0; anIndex < elements.length; anIndex++) {
    if (elements.hasOwnProperty(anIndex))
      elements[anIndex].classList.remove("highLight");
  }
  this.classList.add("highLight");
}
.highLight {
  background-color: red;
}
<div class="col-md-3 section_container ">
  <div id="content" class="col-md-10 leftone ">Make a complaint</div>
  <div class="rightone  col-md-2">
    <img id="arrow" class="arrow-image">
  </div>
</div>


<div class="col-md-3 section_container">
  <div id="content" class="col-md-10 leftone ">Make a complaint</div>
  <div class="rightone  col-md-2">
    <img id="arrow" class="arrow-image">
  </div>
</div>

Upvotes: 1

Smedegaard
Smedegaard

Reputation: 788

Assuming you have a function called handler in your javascript you can give the clicked element as a paramter with the this keyword, like @Reflamer wrote.

The you can use the classList attribute to manipulite what classes the element has like so:

function handler(element) {
    element.classList.add("myFancyClass");
}

If you want to manipulate the child of an element you can use the children attribute:

function handler(element) {
    let children = element.children;

    children.forEach(function(child) {
       if(child.className === "content") {
           child.classList.toggle("myFancyClass");
       }
    })
}

or use one of the other classList functions describe at Mozilla Developer Network

Upvotes: 0

Robba
Robba

Reputation: 8324

You should take a look at jQuery which makes this pretty simple with something like the following:

$('.section_container').on('click', function() {
    var $this = $(this);
    // First remove the new class from all the other sections
    $('.section_container').removeClass('extra-class');
    $('.section_container .content').removeClass('content-extra-class');
    // Then add it to just this one
    $this.addClass('extra-class');
    $this.find('.content').addClass('content-extra-class');
});

Upvotes: 0

Reflamer
Reflamer

Reputation: 309

Note that your IDs should be unique.... you cannot have multiple items with the same Id. But, you should be able to add the code 

onclick="handler(this)"

on all three elements. As @Esko has mentioned, please add your JS code

Upvotes: 0

Related Questions