封装兄弟元素[一次两个]与div共享相同的类

Question

我有十个兄弟元素,有类.post,标记是这样的:

<div class='book'>
    <div class='post text'>one</div>
    <div class='post photo'>two</div>
    <div class='post quote'>three</div>
    <div class='post video'>four</div>
    <div class='post audio'>five</div>
    <div class='post link'>six</div>
    <div class='post text'>seven</div>
    <div class='post video'>eight</div>
    <div class='post quote'>nine</div>
    <div class='post link'>ten</div>
</div>

我想.post div一次封装两个div(比如类.page),所以标记看起来像:

<div class='book'>
    <div class='page'>
        <div class='post text'>one</div>
        <div class='post photo'>two</div>
    </div>
    <div class='page'>
        <div class='post quote'>three</div>
        <div class='post video'>four</div>  
    </div>
    <div class='page'>  
        <div class='post audio'>five</div>
        <div class='post link'>six</div>
    </div>
    <div class='page'>    
        <div class='post text'>seven</div>
        <div class='post video'>eight</div>
    </div>
    <div class='page'>    
        <div class='post quote'>nine</div>
        <div class='post link'>ten</div>
    </div>
</div>

这是一个tumblr布局.我希望布局看起来像一本书,你可以在其中翻阅像la:http://jsfiddle.net/9fdk047t/这样的帖子.

我遇到了一些问题z-index和transition试图不经包装做div了.post秒.

我用十个作为例子..post页面上可能有1-10 秒,因此如果页面上有奇数个.posts,则最后一个封装div应该只承载一个.post.

jsfiddle:http://jsfiddle.net/jklm313/Upb3S/1/

谢谢你的帮助!

Answer 1

可以使用.wrapAll()方法完成:

$('.post').each(function (i) {
    if (!(i % 2)) $(this).next('.post').addBack().wrapAll('<div class="page"/>');
});

DEMO