1

Есть следующий код:

<p>
   <img src.../>
   <img src.../>
</p>
<p>
   <img src.../>
   <img src.../>
   <img src.../>
</p>
<p>
   <img src.../>
</p>

Как с помощью jquery обернуть в контейнер те теги img, которые идут подряд чтобы стало так?

<p>
   <span class='set'>
      <img src.../>
      <img src.../>
   </span>
</p>
<p>
   <span class='set'>
      <img src.../>
      <img src.../>
      <img src.../>
   </span>
</p>
<p>
   <img src.../>
</p>

Есть метод wrapAll, но я не понимаю, что ему передать

$("???").wrapAll("<span class='set'>");

Если делать wrapAll по img+img он обернет второй, третий и последующие, но не первый, а p>img перенесет все шесть img в первый p.

2 ответа 2

3

$(function(){
$('pre').text("Исходный код: " + $('div').html());

// Перебор всех тегов "p" и "обвертывание" img'ов внутри каждого "p" отдельно.
$("p").each(function(){ 
    if ($(this).children("img").length > 1) $(this).children("img").wrapAll("<span class='set'>");
});


$('pre').text($('pre').text() + "Результат: " + $('div').html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
</pre>
<div hidden>

  <p>
     <img src />
     <img src />
  </p>
  <p>
     <img src />
     <img src />
     <img src />
  </p>
  <p>
     <img src />
  </p>

</div>

3
  • 1
    Да, но в этом случае одиночный img он тоже обернет
    – Talleyran
    27 июн 2017 в 11:11
  • Верно, не обратил внимания на это условие, ответ поправил. 27 июн 2017 в 11:14
  • Да, теперь то, что нужно, спасибо!
    – Talleyran
    27 июн 2017 в 11:18
0

for(let image of document.images){
  const parent = image.parentNode;
  if(parent.classList.contains('set')) continue;
  const span = document.createElement('span');
  span.classList.add('set');
  parent.insertBefore(span, parent.firstChild);
  for(let child_img of parent.getElementsByTagName('img'))
      span.appendChild(child_img);
}
p{
  border: 1px solid black;
}
.set{
  display: block;
  border: 1px solid red;
}

img{
   width: 20px; height: 20px;
}
<p>
   <img src.../>
   <img src.../>
</p>
<p>
   <img src.../>
   <img src.../>
   <img src.../>
</p>
<p>
   <img src.../>
</p>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.