CODEWITHSUNDEEP
jquery
user3136030
user3136030

Reputation: 384

Jquery-How to add class to the child element?

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

Upvotes: 4

Views: 24958

Answers (3)

Domain
Domain

Reputation: 11808

jQuery(document).ready(function(){
    jQuery('#submit').click(function(){     
         jQuery(this).parent('header').next('.toggleclass').addClass('open');
    });
});

Upvotes: 0

Kin Chan
Kin Chan

Reputation: 29

try this.

$("#submit").parent().parent().find(" > div").addClass("open");

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 5

Related Questions