How to get the child of a parent div element

Question

If I have a DOM structure like the following:

 $(function() { $(".child-a").click(function() { // change `.child-b` to green // I can go higher into the chain $(this).parents(".parent").css({ "background-color": "black" }); // I can use css to get `.child-b` to blue $(".parent .sub-parent-b .child-b").css({ "background-color": "blue" }); }); }); 

 div div div { width: 100px; height:100px; background-color: red; border:1px black dashed; } .child-a { margin-bottom: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="sub-parent-a"> <div class="child-a"></div> </div> <div class="sub-parent-b"> <div class="child-b"></div> </div> </div> 

I could technically use normal css, but it is not flexible enough.

 $(function() { $(".child-a").click(function() { // change `.child-b` to green // I can go higher into the chain $(this).parents(".parent").css({ "background-color": "black" }); // I can use css to get `.child-b` to blue $(".parent .sub-parent-b .child-b").css({ "background-color": "blue" }); /* In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b While the use of css could only get me to change things in both #a and #b So how could I manage to do something like: #a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b. */ }); }); 

 div div div { width: 100px; height:100px; background-color: red; border:1px black dashed; } .child-a { margin-bottom: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent" id="a"> <div class="sub-parent-a"> <div class="child-a"></div> </div> <div class="sub-parent-b"> <div class="child-b"></div> </div> </div> <div class="parent" id="b"> <div class="sub-parent-a"> <div class="child-a"></div> </div> <div class="sub-parent-b"> <div class="child-b"></div> </div> </div> 

In this case, my first aproach of using parent made sure that the change only apeared on that specific css, or in #a , but not on #b

While the use of css could only get me to change things in both #a and #b

So how could I manage to do something like:

#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b .

Answer 1

You can go up the chain, and you can also go back down the chain. This way the selectors stay within the "this" element.

 $(function() { $(".child-a").click(function() { // change `.child-b` to green // I can go higher into the chain $(this).parents(".parent").css({ "background-color": "black" }); // I can use css to get `.child-b` to blue $(this).parents(".parent").find('.child-b').css({ "background-color": "blue" }); /* In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b While the use of css could only get me to change things in both #a and #b So how could I manage to do something like: #a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b. */ }); }); 

 div div div { width: 100px; height:100px; background-color: red; border:1px black dashed; } .child-a { margin-bottom: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent" id="a"> <div class="sub-parent-a"> <div class="child-a"></div> </div> <div class="sub-parent-b"> <div class="child-b"></div> </div> </div> <div class="parent" id="b"> <div class="sub-parent-a"> <div class="child-a"></div> </div> <div class="sub-parent-b"> <div class="child-b"></div> </div> </div> 

Answer 2

IMO you have way to much jQuery and aren't using any of the power of css.

 $(function() { $(".child").click(function() { // reset $('.parents .selected').removeClass('selected'); var $child = $(this); var $subParent = $(this).closest('.sub-parent'); $child.addClass('selected'); $subParent.addClass('selected'); }); }); 

 div{ padding: 5px; } .sub-parent.selected { background-color: red; } .child{ cursor: pointer; } .child.selected { background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parents">Parents <div class="parent">- Parent <div class="sub-parent">- - Sub Parent <div class="child">- - - Child</div> </div> <div class="sub-parent">- - Sub Parent <div class="child">- - - Child</div> </div> </div> <div class="parent">- Sub Parent <div class="sub-parent">- - Sub Parent <div class="child">- - - Child</div> </div> <div class="sub-parent">- - Sub Parent <div class="child">- - - Child</div> </div> </div> </div>