jQuery: prev (дочерний селектор) не дает желаемого результата

Question

Я использую дочерний селектор внутри метода prev, однако я не могу получить желаемый результат.

$( ".collapse" ).prev( ".my-row > .panel-heading" ).first().css( "background", "yellow" );

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

<div class="my-row">
    <p class="panel-heading">1</p>
    <p class="panel-heading">2</p>
    <p class="panel-heading">3</p>
</div>
<div class="collapse">Hello</div>

первый абзац заголовка класса панели Я хочу изменить его фон.

Answer 1

Попробуйте это:

$(".collapse").prev(".my-row").find(".panel-heading").first().css("background", "yellow");

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

<div class="my-row">
  <p class="panel-heading">1</p>
  <p class="panel-heading">2</p>
  <p class="panel-heading">3</p>
</div>
<div class="collapse">Hello</div>

... метод .prev() ищет предшественника каждого из этих элементов в дереве DOM и создает новый объект jQuery из соответствующих элементов.

• https://api.jquery.com/prev/

Используйте .prev(), чтобы найти нужный элемент, а затем найти его детей с .find() или .children().