如何獲取父div元素的子元素

Question

如果我具有如下所示的DOM結構：

 $(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> 

從技術上講，我可以使用普通的CSS，但是不夠靈活。

 $(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> 

在這種情況下，我的第一個使用parent是確保更改僅在特定的CSS或#a ，而在#b不進行

雖然使用CSS只能讓我更改#a和#b

所以我怎么能做這樣的事情：

#a .sub-parent-a .child-a被單擊，因此僅#a .sub-parent-b .child-b發生了變化，而#b .sub-parent-b .child-b沒有發生變化。

Answer 1

您可以上鏈，也可以下鏈。 這樣，選擇器將停留在“ this”元素內。

 $(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，您可以使用很多jQuery，並且沒有使用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>