Как найти несколько идущих друг за другом элементов с помощью?

Есть html статья, нужно найти все наборы элементов, удовлетворяющих следующему условию:
Нужно найти несколько идущих друг за другом тегов p (если их больше 1), которые содержат тег img и добавить эти теги p в созданный блок с классом <div class="owl-carousel"></div>
https://codepen.io/marishik92/pen/mdJpGGv

HTML Код примерно следующего содержания:
<h2>Заголовок H2 Номер 1</h2>
<h3>Заголовок H3</h3>
<p>Простой текст Простой текст Простой текст Простой текст<p>
<p><img src="images/image.png"></p>
<p><img src="images/image.png"></p>
<p><img src="images/image.png"></p>
<p>Простой текст Простой текст Простой текст Простой текст</p>

<h2>Заголовок H2 Номер 2</h2>
<p>Простой текст Простой текст Простой текст Простой текст<p>
<p><img src="images/image.png"></p>
<p><img src="images/image.png"></p>
<p>Простой текст Простой текст Простой текст Простой текст</p>

<h2>Заголовок H2 Номер 3</h2>
<p>Простой текст Простой текст Простой текст Простой текст<p>
<p><img src="images/image.png"></p>
<p><img src="images/image.png"></p>
<p><img src="images/image.png"></p>
<p>Простой текст Простой текст Простой текст Простой текст</p>


В данном случае должно получиться 3 слайдера.

$("p").each(function(){ 
 if( $(this).children("img").length > 0 ) {
        //создаем элемент <div class="owl-carousel"></div> и добавляем в него идущие подряд несколько тегов p с картинками
   }
});
//на выходе должно получиться три блока с классом owl-carousel с расположенными в нем <p><img/></p>
  • Вопрос задан
  • 90 просмотров
Решения вопроса 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Ждем следующего вопроса - почему при оборачивании картинок в p с классом owl-carousel они не становятся слайдером :))))
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы