如何获取父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

你可以上链，你也可以回到链条上。通过这种方式，选择器保持在＆＃34;这个＆＃34;元件。

＆＃13;

＆＃13;

$(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.
    */
  });
});

＆＃13;

div div div {
  width: 100px;
  height:100px;
  background-color: red;
  border:1px black dashed;
}

.child-a {
  margin-bottom: 5px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>