Javascript/jquery - 在 dom 中上升 2 层(我们称这个对象为 "A")，然后将 css 应用到 "A"的子对象之一

Question

我没有找到解决这个问题的方法。

$( ".child").closest( ".parent").closest(".grandparent")

当我有了这个对象时，我想将一些 CSS 应用于它的一个子对象(我们称之为 mygodfather)

非常感谢您的帮助!

.grandparent.mygodfather{
background-color: red
}```

Answer 1

jQuery.find可以用来选择“教父”元素:

$( ".child" ).closest(".grandparent").find('.godfather').css('background-color', 'red')

演示:

$( ".child" ).closest(".grandparent").find('.godfather').css('background-color', 'red')

div {
  border: 1px solid #ccc;
  margin: 1rem 3rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grandparent">
  Grandparent
  <div class="parent">
    Parent
    <div class="child">
      Child
    </div>
  </div>
  <div class="godfather">
    Godfather
  </div>

</div>

编辑:按照@Andy Hoffman的建议进行简化:只需要对.closest进行一次调用。