jquery - 如何像这样包装所有元素

Question

<div id="editor">
  text
  <div id="wrap"> <!-- here -->
    <img src="images/1.jpg"/>
  </div>
  text</p>
  <div id="wrap"> <!-- and here -->
    <img src="images/3.jpg"/>
    <img src="images/4.jpg"/>
    <img src="images/5.jpg"/>
    <img src="images/6.jpg"/>
  </div>
</div>

Answer 1

我想你想包装<img>元素分组。

如果是这样，请执行以下操作：

示例：http: //jsfiddle.net/patrick_dw/RXFVM/1/

$('#editor > img:not(img + img)').each(function() {
    $(this).nextUntil(':not(img)').andSelf().wrapAll('<div class="wrap"></div>');
});

• 'img:not(img + img)': 获取前面没有图片的图片
• .each(): 遍历它们
• .nextUntil(':not(img)')：获取所有下一个元素，只要它们是图像
• .andSelf(): 包括原始图像
• .wrapAll('<div class="wrap"></div>'): 包裹组

请注意，我更改id="wrap"为class="wrap"因为您不能在页面上重复使用 ID。

---

编辑：更新示例链接以使用未损坏的图像。

Answer 2

据我了解，您想用 jquery 包装图像吗？

好吧，它可能看起来像这样

$('img').wrap('<div id="wrap" />');

但如果你想要一个更好的答案，你必须更精确