Jquery-How to add class to the child element?

Question

I have a html code like this,

<div>
    <header>
        <div>Title</div>
        <h5> sub title </h5>
        <button id="submit">Button</button>
    </header>
    <div class="toggleclass"></div>
</div>

I want to add a class ("open") to last div tag onclick of button tag. Onclick i can do like this,

$(".toggleclass").addClass("open");

But i want it in parent and child structure.Something like,

$("#submit").children('div').addClass("open");

I tried above code but it is not working

Answer 1

Given your HTML:

<div>
    <header>
        <div>Title</div>
        <h5> sub title </h5>
        <button id="submit">Button</button>
    </header>
    <div class="toggleclass"></div>
</div>

Your jQuery:

$("#submit").children('div').addClass("open");

Couldn't possibly work, since you've selected the button #submit and are then using children() to find a child <div> of the <button> element. You'll note that the <button> is not a child of that element. First you have to move to the <header> element, and then find the nextSibling (albeit using jQuery's next() method):

$('#submit').on('click', function () {
    // the element that was clicked:
    $(this)
        // finding the first ancestor <header> element:
        .closest('header')
        // finding the next sibling, if it matches the selector:
        .next('.toggleclass')
       // adding the 'open' class-name:
       .addClass('open');
});

$('#submit').on('click', function () {
    // the element that was clicked:
    $(this)
        // finding the first ancestor <header> element:
        .closest('header')
        // finding the next sibling, if it matches the selector:
        .next('.toggleclass')
       // adding the 'open' class-name:
       .addClass('open');
});

.toggleclass::before {
  content: attr(class);
}

.open {
  color: #f90;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <header>
        <div>Title</div>
        <h5> sub title </h5>
        <button id="submit">Button</button>
    </header>
    <div class="toggleclass"></div>
</div>

Or, you could move straight up to the wrapping <div>, and from there use find('.toggleclass'):

$('#submit').on('click', function () {
    // the element that was clicked:
    $(this)
        // finding the first ancestor <div> element:
        .closest('div')
        // finding the descendent '.toggleclass' elements:
        .find('.toggleclass')
       // adding the 'open' class-name:
       .addClass('open');
});

$('#submit').on('click', function () {
    // the element that was clicked:
    $(this)
        // finding the first ancestor <div> element:
        .closest('div')
        // finding the descendent '.toggleclass' elements:
        .find('.toggleclass')
       // adding the 'open' class-name:
       .addClass('open');
});

.toggleclass::before {
  content: attr(class);
}

.open {
  color: #f90;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <header>
        <div>Title</div>
        <h5> sub title </h5>
        <button id="submit">Button</button>
    </header>
    <div class="toggleclass"></div>
</div>

If, as the class-name of the <div> implies, you want to toggle the 'open' class-name for the <div>, you could use toggleClass('open') rather than addClass('open'):

$('#submit').on('click', function () {
    // the element that was clicked:
    $(this)
        // finding the first ancestor <div> element:
        .closest('div')
        // finding the descendent '.toggleclass' elements:
        .find('.toggleclass')
       // adding the 'open' class-name:
       .toggleClass('open');
});

.toggleclass::before {
  content: attr(class);
}

.open {
  color: #f90;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <header>
        <div>Title</div>
        <h5> sub title </h5>
        <button id="submit">Button</button>
    </header>
    <div class="toggleclass"></div>
</div>

References:

• addClass().
• closest().
• find().
• next().
• toggleClass().