访问父div之外的div

Question

如何通过点击.box1更改.box3的样式？

$(function() {
  $(".box3").click(function() {
    $(this).parents().find('.box1').css('border', '1px solid red');
  });
})();

.container {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

.box {
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid green;
}

.box1 {}

<div class="container">
  <div class="box box1">Box1</div>
  <div class="box box2">Box2
    <div class="box3">Box 3</div>
  </div>
</div>

Answer 1

您可以使用parent()和prev() jQuery方法，如下例所示。

示例：

$(function() {
  $(".box3").click(function() {
    $(this).parent().prev('.box1').css('border', '1px solid red');
  });
});

.container {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

.box {
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid green;
}

.box1 {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box box1">Box1</div>
  <div class="box box2">Box2
    <div class="box3">Box 3</div>
  </div>
</div>

Answer 2

在没有parent()

的情况下使用s

$(function(){
    $(".box3").click(function() {
        $(this).parent().parent().find('.box1').css('border', '1px solid red');
    });
})();

或将parents与selector参数parents('.container')

一起使用

$(function(){
    $(".box3").click(function() {
        $(this).parents('.container').find('.box1').css('border', '1px solid red');
    });
})();

Answer 3

如果你想只使用Javascript ....

var box3Div = document.querySelector("div.box3");
box3Div.onclick = function(){
    this.parentElement.previousSibling.style.border = "1px solid red";
}