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