jQuery или JS - как обернуть изображение, если родитель не <a>?

Question

Я изо всех сил пытаюсь заставить его работать. Мне нужно обернуть изображения, которые не являются "кликабельными", внутри div.

Изображения, которые являются дочерними элементами a, не следует переносить.

Я сделал следующее:

if ($(window).width() > 960) {
  if (!$("img").parent().is("a")) {
    $("img").wrap('<div class="clickable_image"></div>');
  }
}

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

<p>
  <img class="alignnone wp-image-60001 size-full" src="http://placekitten.com/g/200/300" alt="yyyyy" width="1400" height="1686">
</p>

<p>
  <a href="https://google.com" target="_blank">
    <img class="alignnone wp-image-60003 size-full" src="http://placekitten.com/g/500/300" alt="xxxx" width="1500" height="350">
  </a>
</p>

Однако я делаю некоторые ошибки, потому что он не переносит изображение. И если я удалю!, Оба изображения будут упакованы. Обернуть следует только изображение, которое НЕ находится внутри. Как мне этого добиться?

Answer 1

Вы можете использовать селектор потомков, чтобы обернуть только элементы img, которые являются дочерними элементами p:

if ($(window).width() > 960) {
  $('p > img').wrap('<div class="clickable_image" />');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <img class="alignnone wp-image-60001 size-full" src="http://placekitten.com/g/200/300" alt="yyyyy" width="1400" height="1686">
</p>
<p>
  <a href="https://google.com" target="_blank">
    <img class="alignnone wp-image-60003 size-full" src="http://placekitten.com/g/500/300" alt="xxxx" width="1500" height="350">
  </a>
</p>