javascript - jquery 在 2 个 div 周围添加包装 div，其中内容可以是可变长度

Question

我有这个代码

<div class="pagenavcounter">Page 2 of 4</div><p>
<strong>test test</strong></p>
</div>
<ul class="ticklist">
<li>Test Content</li>
<li>
     Test Content</li>
<li>
    Test Content </li>
<li>
     Test Content*</li>
</ul>
<p>
<strong>Package Extras</strong></p>
<ul>
<li>
    Test Contentt<sup>#</sup></li>
<li>
    Test Content</li>
<li>
    Test Content</li>
</ul>
<table class="stripeTable" style="width:95%;" border="0" cellpadding="0" cellspacing="0" width="518">
<tbody>
    <tr class="">
        <td class="customerDetailsThead header" colspan="2">
            <p>
                <strong>Key features</strong></p>
        </td>
    </tr>
    <tr class="odd">
        <td class="customerDetails" style="width:35.0%;">
            <p>
                test</p>
        </td>
        <td class="customerDetails">
            <p>
                test</p>
        </td>
    </tr>

</tbody>
</table>

<p>
<sup>contwent contese</sup>
</p>
<div class="pagenavbar"><div>

我需要用 jQuery 插入一个包装器 div，它在 pagenavcounter 之后开始并在 pagenavbar 之前结束？

两者之间的含量可以不同..

关于如何做到这一点有什么想法吗？

谢谢

Answer 1

以下将完成这项工作，假设您提到的两个 div 是 sibling 。 (如果它们不是 sibling ，那么将它们之间的所有内容包装在一个元素中就没有意义。)

$("div.pagenavcounter").nextUntil("div.pagenavbar")
                       .wrapAll( $("<div></div>").addClass("wrapper") );

您传递给 .wrapAll() 方法的元素将成为新的包装器 - 出于演示目的，我只是创建一个新的空 div 并为其指定类 "包装器”。

演示:http://jsfiddle.net/nnnnnn/SpPzh/

如果 .nextUntil() 和 .wrapAll() 不是不言自明的，你知道 where to look ...