Question

我如何使用一个看起来像这样的Jquery来包装一堆HTML？

<h2 id="1area">Text</h2>
<p><strong>Step 1</strong></p>
<p><strong>Step 2</strong></p>
<p><img Step 1></p>
<code></code>
<h2 id="2area">Text</h2>
<p><strong>Step 1</strong></p>
<p><strong>Step 2</strong></p>
<p><img Step 1></p>
<code></code>

向

<div class="wrapit">
<h2 id="1area">Text</h2>
<p><strong>Step 1</strong></p>
<p><strong>Step 2</strong></p>
<p><img Step 1></p>
<code></code>
</div>

<div class="wrapitnumber2">
<h2 id="2area">Text</h2>
<p><strong>Step 1</strong></p>
<p><strong>Step 2</strong></p>
<p><img Step 1></p>
<code></code>
</div>

我希望有两个标有不同div和类的部分。

Answer 1

对于你的问题，试试这个：

$('h2').each(function(){
     $(this).nextUntil('h2').andSelf().wrapAll('<div class="wrapit"/>');
});

正如评论中所提到的，这是遍历DOM树以适当选择元素并使用JQuery wrapAll函数的情况。

实施例：

$('h2').each(function(){
         $(this).nextUntil('h2').andSelf().wrapAll('<div class="wrapit"/>');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Text</h2>
<p><strong>Step 1</strong></p>
<p><strong>Step 2</strong></p>
<p><img Step 1></p>
<h2>Text</h2>
<p><strong>Step 1</strong></p>
<p><strong>Step 2</strong></p>
<p><img Step 1></p>
<h2>Text</h2>
<p><strong>Step 1</strong></p>
<p><strong>Step 2</strong></p>
<p><img Step 1></p>

用jquery

1 个答案: