主页 / 问题 / 684306
Accepted
Talleyran
Asked:2020-06-27 18:45:43 +0000 UTC2020-06-27 18:45:43 +0000 UTC

如何在jquery中找到DOM中连续的几个元素，并把它们包装在一个容器中？

  • 772

有以下代码：

<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'>");

如果你在img+img上做 wrapAll ，它会包裹第二个、第三个和后续的，但不会包裹第一个，并且p>img会将所有六个 img 转移到第一个 p。

jquery

2 个回答

  1. Best Answer

    $(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 

  2. 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>

    • 0

相关问题