У меня есть следующие строки кода в моем веб-сайте: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();
}
Что я пытаюсь сделать:
- Проверьте есть изображение в
the-post-thumbnail
DIV и если да, то скрыть ручной эскиз изображения внутриpost-body
- Проверьте, если есть не изображение в
the-post-thumbnail
DIV и если да, то показывать ручной эскиз изображения вpost-body
Это частично работает, однако, что я заметил, что если я удалить вручную уменьшенное изображение внутри post-body
DIV, он удалит второе изображение тела после того, как тег абзаца.
Как настроить таргетинг только на миниатюрное изображение вручную, которое непосредственно находится в пределах post-body
div, чтобы я мог достичь двух элементов списка выше, без добавления дополнительных классов?
FYI:
Это связано с поменяв тему моего веб-сайта для другой. Старшая версия потребовала, чтобы я разместил миниатюру для каждого сообщения вручную в верхней части статьи, и новая тема делает это для меня автоматически. Это привело к дублированию изображений для более старых сообщений.