Jquery выбор ребенка внутри не работает

Question

Код:

  <article>
    <a href="#"><h4>h4 inside anchor</h4></a>
    <p>This is a sibling paragraph of that anchor which had h4 in it</p>
  </article>
  <script>
    $('article p').click(function(){
      $(this).prev('a h4').css("background-color", "yellow");
    });
  </script>

Когда я нажимаю на абзац, я ожидаю, что h4 получит желтый цвет фона, но он не работает.

Кроме того, документация JQuery о "prev" не совсем понятна в отношении селекторов с потомками внутри prev (поэтому первое следствие - это то, что оно не отличается от общего ожидаемого поведения селекторов):

Если указан селектор, он извлекает предыдущего родного брата, только если он совпадает с селектором .

, так что не так?

Answer 1

Проблема в том, что вы используете дочерний селектор в вызове prev(). Внутренне jQuery использует logi c, аналогичный is(), чтобы определить, соответствуют ли элементы-братья этому селектору, поэтому он проверит, является ли a a h4, что никогда не может быть case.

Чтобы исправить это, используйте комбинацию prev() и find():

$('article p').click(function() {
  $(this).prev('a').find('h4').addClass('highlight');
});

.highlight { background-color: #FF0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>
  <a href="#">
    <h4>h4 inside anchor</h4>
  </a>
  <p>This is a sibling paragraph of that anchor which had h4 in it</p>
</article>

Answer 2

Вам не нужна буква «а» в предыстории, поскольку предыстория уже выбрала «а», и вам просто нужно указать, что вы хотите получить «h4», обновлено:

$(this).prev().find('h4').css("background-color", "yellow");

Answer 3

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

<article>
    <a href="#"><h4>h4 inside anchor</h4></a>
    <p style="cursor:pointer">This is a sibling paragraph of that anchor which had h4 in it</p>
  </article>
  
    <script>
    $(document).ready(function(){
	    $(document).on('click','article p',function(){
		    $(this).prev('a').find('h4').css("background-color", "yellow");
	    });
    });  
  </script>