包封物兄弟元素[每次兩個]與一個div共用同一類

我有.post十個同級元素，標記是一樣的東西：包封物兄弟元素[每次兩個]與一個div共用同一類

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

我想.postdiv小號封裝2在與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 s到做。

我以十個爲例。頁面上可能有1-10 .post s，因此如果頁面上有奇數個.post s，則最後封裝的div應該只能託管一個.post。

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

謝謝您的幫助！

來源

2013-11-27 carpenumidium

可以用.wrapAll()方法來完成：

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

DEMO

來源

2013-11-27 12:20:39

太棒了！在我接受你的答案之前，讓我玩幾分鐘的演示吧！（我已經接受了我的心）。 – carpenumidium

剛剛更新使用addBack（），andSelf（）beeing棄用 –

這是合適的，A.沃爾夫！太感謝了！ :) – carpenumidium

var posts = $('.post'); 
for(var i=0; i < posts.size(); i+=2) { 
    var group = $(posts.get(i)).add($(posts.get(i+1))); 
    group.addClass('group'); 
    $('.group').wrapAll('<div class="page" />'); 
    group.removeClass('group'); 
}

來源

2013-11-27 12:27:06 Samy

答：沃爾夫的答案更加緊湊 – Samy

謝謝，薩米，你的工作，但A.沃爾夫的答案似乎是更好的解決方案。乾杯! :) – carpenumidium

沃爾夫的答案肯定是緊湊的，我學到了很多東西，從它
下面是我試過了，漫長的一個。。:)

$(document).ready(function() { 
    var book = $('.book'); 
    var postgroups = []; 
    var postitems = []; 
    var addItems = function() { 
     var grpDiv = $('<div class ="page"/>'); 
     $(grpDiv).append(postitems); 
     postitems = []; 
     postgroups.push(grpDiv); 
    } 
    $('.post').each(function (index, item) { 
     postitems.push(item); 
     if ((index + 1) % 2 == 0) { 
      addItems(); 
     } 
    }); 
    if (postitems.length > 0) { 
     addItems(); 
    } 
    if (postgroups.length > 0) { 
     $(book).empty(); 
     $(book).append(postgroups); 
    } 
});

來源

2013-11-27 12:34:20 SridharVenkat

包封物兄弟元素[每次兩個]與一個div共用同一類

回答

相關問題