如何用javascript包装重复的html块？

Question

我正在为wordpress博客写一个自定义页面。很多内容都是由PHP动态注入的。我不得不添加一些CSS类来使用jQuery动态创建html标记。我被困在这个..。

我将如何包装这些“重复视频块”，我的用户将在这个wordpress页面上创建一个div？

注意:div.entry内容中的所有元素都有'3‘类。类“1”和“2”是特定于元素的类。

<div class="canvas">
<div class="entry-content">

    <p class="1 3">Title-1</p>
    <div class="2 3">_____</div>
    <p class="3">Video Here</p> 
    <!- End of first "repeating video-block" -->

    <p class="1 3">Title-2</p>
    <div class="2 3">_____</div>
    <p class="3">Video Here</p>

    <p class="1 3">Title-3</p>
    <div class="2 3">_____</div>
    <p class="3">Video Here</p>

</div>
</div>

就像我一直以来的努力一样。http://jsfiddle.net/djfrsn/mq5ww/2/

var above      = $('.2').prev();
var below      = $('.2').after();
var videoBlock = '<div></div>';
$(below).addBack().wrapAll(videoBlock);

到目前为止，我的资源是@ jQuery网站上的DOM遍历文档&这个堆栈溢出帖子(jQuery How to wrap div around multiple of the same class elements)似乎接近了我所需要的，尽管到目前为止还没有什么进展。

下面是我想要的输出：

<div class="canvas">
<div class="entry-content">

    <div class="vid-block">
        <p class="1 3">Title-1</p>
        <div class="2 3">_____</div>
        <p class="3">Video Here</p> 
    </div> <!- End of first "repeating video-block" -->

    <div class="vid-block">
        <p class="1 3">Title-2</p>
        <div class="2 3">_____</div>
        <p class="3">Video Here</p> 
    </div>

    <div class="vid-block">
        <p class="1 3">Title-3</p>
        <div class="2 3">_____</div>
        <p class="3">Video Here</p> 
    </div>

</div>
</div>

Answer 1

这应该能做你想做的。

http://jsfiddle.net/mq5ww/4/

$(".1").each(function(){
    $(this).nextUntil(".1").addBack().wrapAll("<div class='wrapper'>");
});