Проверьте, есть ли у тега P тег IMG с указанным c id

Question

У меня есть html страница с этим кодом:

<p>
    <img src="path.jpg" id="img_2">
</p>

Как я могу выбрать с помощью JS любой <p>, который содержит <img id="img_2">:

Я пытался это но не работает:

 if $('p:has(img#img_2)'){
    action here
 }

Answer 1

Вы должны обернуть объект jquery внутри (). Также вы должны использовать свойство length объекта:

if ($('p:has(img#img_2)').length){
    console.log('Exists');
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <img src="path.jpg" id="img_2">
</p>

Answer 2

Вы можете использовать length свойство как:

if ($('p').find('img#img_2').length) {
  console.log('Image found!')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <img src="path.jpg" id="img_2">
</p>

Или

if ($('p > img#img_2').length) {
  console.log('Image found!')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <img src="path.jpg" id="img_2">
</p>

Или ваш код также должен работать с (), например:

if ($('p:has(img#img_2)')) {
  console.log('Image found!')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <img src="path.jpg" id="img_2">
</p>

Answer 3

Отладка

Ваш код:

if $('p:has(img#img_2)'){
  action here
}

Имеет следующие проблемы:

• без скобок вокруг выражения условия
• jQuery объект всегда возвращает истину

Исправлено:

// .length is used to for detection and results in truthy/falsy expression 
if ( $('p:has(img#img_2)').length ){ 
  action here
}

---

Обнаружение родителя / ребенка

Обнаружение элемента может быть легко выполнено изначально без использования jQuery.

1. Walking-Up

Этот подход находит элемент и идет вверх по дереву DOM. closest и parentNode используются для четкого описания намерения; поскольку желательно, чтобы ближайшим p был родитель, а не какой-то предок. В производственной среде вы можете добавить проверки, чтобы убедиться, что img найден перед поиском родителя - быстрый способ - добавить img && в начале условия.

const img = document.querySelector('#img_2')

if (img.closest('p') == img.parentNode)
  console.log('found')
  
if (img.closest('p') != img.parentNode)
  console.log('not found')

<p>
  <img src="path.jpg" id="img_2">
</p>

2. Прогулка вниз

Это достигается путем поиска абзаца и поиска его детей.

const p = document.querySelector('p')

if (p.querySelector('#img_1'))
  console.log('found 1')
  
if (p.querySelector('#img_2'))
  console.log('found 2')       // not found

<p>
  <img src="path.jpg" id="img_1">
  <div><img src="path.jpg" id="img_2"></div>
</p>

3. Доверие к Child-Selector

Это использует дочерний > селектор для извлечения элементов и последующей оценки, были ли найдены элементы. Предоставлены обе стороны условного обозначения, чтобы проиллюстрировать, как обнаружить несоответствие. Как правило, else будет достаточно.

const img1 = document.querySelector('p > #img_1')
const img2 = document.querySelector('p > #img_2')


if (img1)
  console.log('found img_1')                    // not reached
if (!img1)
  console.log('no paragraph with #img_1 child')
  
  
if (img2)
  console.log('found "p>#img_2"; paragraph: ', img2.parentNode)
if (!img2)
  console.log('no paragraph with #img_2 child') // not reached

<!-- outside -->
<img src="path.jpg" id="img_1">

<!-- inside -->
<p>
  <img src="path.jpg" id="img_2">
</p>

Answer 4

с использованием > Детский комбинатор Примерно так:

console.log($('p > img#img_2').length);

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<p>
    <img src="path.jpg" id="img_2">
</p>