使用 jQuery 将元素包装到 div 中答案

【问题标题】：Wrap elements into div with jQuery使用 jQuery 将元素包装到 div 中
【发布时间】：2015-11-26 09:22:49
【问题描述】：

我需要将一些 HTML 元素包装到 div 中。

标记是这样的：

<div class="block">
    <h2 class="block-title">Lorem</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque <span>tellus</span> non magna.</p>
    <div class="message"><span class="message-title">Warning:</span>
        <p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque tellus non <strong>magna</strong>.</p>
    </div>
</div>

<div class="block">
    <h2 class="block-title">Lorem 2 lorem</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="note"><span class="note-title">Warning:</span>
        <p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque tellus non <a href="#">magna</a>.</p>
    </div>
</div>

我需要的最终结果是：

<div class="block">
    <h2 class="block-title">Lorem</h2>
    <div class="collapsed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque <span>tellus</span> non magna.</p>
        <div class="message"><span class="message-title">Warning:</span>
            <p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque tellus non <strong>magna</strong>.</p>
        </div>
    </div>
</div>

<div class="block">
    <h2 class="block-title">Lorem 2 lorem</h2>
    <div class="collapsed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="note"><span class="note-title">Warning:</span>
            <p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque tellus non <a href="#">magna</a>.</p>
        </div>
    </div>
</div>

所以基本上所有在 h2.block-title 里面和之后的东西都应该放在里面。

我现在的 JS

$('.block').each(function() {
    $(this).find('p').wrapAll('<div class="collapsable"></div>');
});

但这仅适用于 p 标签。如何添加包含的 div？

【问题讨论】：

我会使用 $(this).children(':not(h2)').wrapAll('<div class="collapsable"></div>'); 或 $(this).children(':not(:first-child)').wrapAll('<div class="collapsable"></div>');

标签： jquery html

【解决方案1】：

使用 comma(,) separated multiple selectors，另外你需要使用 children() 否则它也会选择内部元素

$('.block').each(function() {
  $(this).children('p,div').wrapAll('<div class="collapsable"></div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
  <h2 class="block-title">Lorem</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque <span>tellus</span> non magna.</p>
  <div class="message"><span class="message-title">Warning:</span>
    <p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque tellus non <strong>magna</strong>.</p>
  </div>
</div>

<div class="block">
  <h2 class="block-title">Lorem 2 lorem</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <div class="note"><span class="note-title">Warning:</span>
    <p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque tellus non <a href="#">magna</a>.</p>
  </div>
</div>

或者使用 :not(h2) 选择除 h2 之外的所有元素

$('.block').each(function() {
  $(this).children(':not(h2)').wrapAll('<div class="collapsable"></div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
  <h2 class="block-title">Lorem</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque <span>tellus</span> non magna.</p>
  <div class="message"><span class="message-title">Warning:</span>
    <p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque tellus non <strong>magna</strong>.</p>
  </div>
</div>

<div class="block">
  <h2 class="block-title">Lorem 2 lorem</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <div class="note"><span class="note-title">Warning:</span>
    <p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Phasellus fringilla, lorem in congue lacinia, metus dolor mollis diam, eget maximus neque tellus non <a href="#">magna</a>.</p>
  </div>
</div>

【讨论】：

第一个建议不起作用，因为它还会删除注释/消息中的段落。但是 not(h2) 完美地工作！不过我会把 find 改成孩子 :)

【解决方案2】：

您所要做的就是选择 div.block 内的所有内容，而不需要标题。这可以通过不同的方式完成：

选择确切的标签（如果你决定添加 html 元素，你也必须更改 js）
```
$('.block').find('div,p');
```
全选并减去标题
```
$('.block').find(':not(h1)');
```
选择标题附近的所有内容
```
$('.block').find('h1').siblings();
```

【讨论】：

【解决方案3】：

试试这个：

$('.block-title').each(function(){ $(this).siblings().wrapAll('<div class="collapsable"></div>'); })

【讨论】：

你应该添加一些解释为什么你提出这个确切的解决方案。这篇文章现在质量不够好，可能很快就会被评论者删除。例子：你需要申请h2元素，而不是div，因为...
这是问题的正确解决方案。我认为这没有任何问题。