2015-11-21 2 views
2

У меня есть следующие строки кода в моем веб-сайте:DIV Кондиционер - Проверка, если IMG существует в DIV

HTML:

<div class="the-post-thumbnail"> 
    <p><img src="http://placehold.it/350x150/FF0000/FFFFFF?text=Automatic+Thumbnail" alt="" width="" height="" /></p> 
</div> 

<div class="post-body"> 
    <p><img src="http://placehold.it/350x150/00FF00/FFFFFF?text=Manual+Thumbnail" alt="" width="" height="" /></p>  
    <p>Paragraph</p> 
    <p><img src="http://placehold.it/350x150/0000FF/FFFFFF?text=Body+Image" alt="" width="" height="" /></p> 
</div> 

JavaScript/JQuery:

var ele = $('.post-body p:has(img):first'); 

if ($('.the-post-thumbnail img').length) { 
    ele.hide(); 
} 

else { 
    ele.show(); 
} 

Что я пытаюсь сделать:

  1. Проверьте есть изображение в the-post-thumbnail DIV и если да, то скрыть ручной эскиз изображения внутри post-body
  2. Проверьте, если есть не изображение в the-post-thumbnail DIV и если да, то показывать ручной эскиз изображения в post-body

Это частично работает, однако, что я заметил, что если я удалить вручную уменьшенное изображение внутри post-body DIV, он удалит второе изображение тела после того, как тег абзаца.

Как настроить таргетинг только на миниатюрное изображение вручную, которое непосредственно находится в пределах post-body div, чтобы я мог достичь двух элементов списка выше, без добавления дополнительных классов?

FYI:

Это связано с поменяв тему моего веб-сайта для другой. Старшая версия потребовала, чтобы я разместил миниатюру для каждого сообщения вручную в верхней части статьи, и новая тема делает это для меня автоматически. Это привело к дублированию изображений для более старых сообщений.

CodePen Example

ответ

2

Working fiddle.

Просто изменяя положение :first селектора должны делать свою работу, потому что она будет выбирать всегда первый p и проверить, если он имеет изображение:

var ele = $('.post-body p:first:has(img)'); 

Надеется, что это помогает.

1

Без использования дополнительных селекторов вы можете проверить изображение в первом абзаце.

var ele = $('.post-body p:eq(0):has(img)'); 
Смежные вопросы