JQuery Добавление класса в несвязанный элемент Div по клику

Question

Я хотел бы добавить класс «любимый» в первый div с классом «box» над div с классом «click-me» при нажатии. Но это не родитель или не связанный вообще.

      <div class="box">
          <div>
            <img src="">
          </div>
      </div>


    <div class="modal">
      <div>
        <div>
          <div>
            <div>

              <h2>
                <div class="click-me">
                   Click me
                </div>
               </h2>

             </div>
            </div>
          </div>
        </div>
      </div>

Я пробовал:

            $(".click-me").click(function () {
                $(this).prevAll('.box:first').addClass('favourite');
            });

Answer 1

Это будет работать:

 $(".click-me").click(function () {
          $('.box').first().addClass('favourite');
     });

Answer 2

Попробуйте комбинацию closest и prev

$(".click-me").click(function() {
  $(this).closest('.modal').prev(".box").addClass('favourite');
});

.favourite {
  background: #ccc;
}

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


<div class="modal">
  <div>
    <div>
      <div>
        <div>

          <h2>
            <div class="click-me">
              Click me
            </div>
          </h2>

        </div>
      </div>
    </div>
  </div>
</div>