Question

我需要将一些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还包括？

Answer 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>

Answer 2

您所要做的就是在没有标题的情况下选择//Get list of dates var auditDates = []; @foreach (var a in Model.Audits) { //Push into auditDates Array @:auditDates.push(new Date('@a.AuditDate.Year', '@a.AuditDate.Month', '@a.AuditDate.Day')); //Write Actual dates stored in audits to console without pushing into auditDates Array @:console.log("Actual Date: " + '@a.AuditDate.Year' + " " + '@a.AuditDate.Month' + " " + '@a.AuditDate.Day'); } //Write to console with array full of dates console.log(auditDates);内的每个标记。这可以通过不同的方式完成：

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

Answer 3

试试这个：

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

使用jQuery将元素包装到div中

3 个答案: