Javascript / jquery - go 2 уровня в домене (давайте назовем этот объект "A") и затем применим css к одному из потомков "A"

Question

Я не нашел способа решить эту проблему.

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

И когда у меня есть этот объект, я бы хотел применить css к одному из его объектов. дети (давайте назовем моего отца)

Большое спасибо за вашу помощь!

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

Answer 2

Вы можете использовать jQuery.parent(), чтобы пройти по дереву DOM (в вашем случае, чтобы получить "parent" и "grandparent"), а затем использовать jQuery.children() или jQuery.find(), чтобы выбрать правильный дочерний элемент (в вашем случае «mygodfather»)

Полученный код будет:

$(".child").parent().parent().next(".mygodfather");