找到奇數和偶數div並放入包含div

我試圖解決一些應該很簡單的事情。但是，我認爲它實際上有點棘手。我正在創建一個Tumblr主題，我有一個包含所有文章的列表。對於我的佈局，我需要兩個獨立的div，包括所有的偶數和奇數帖子。我如何用基本的jquery實現這樣的事情？找到奇數和偶數div並放入包含div

<!-- Original --> 
<div id="posts"> 
    <div class="post">Content odd</div> 
    <div class="post">Content even</div> 
    <div class="post">Content odd</div> 
    <div class="post">Content even</div> 
    <div class="post">Content odd</div> 
    <div class="post">Content even</div> 
</div> 

<!-- New Situation --> 
<div id="posts"> 
    <!-- Odd Posts --> 
    <div id="col-one"> 
     <div class="post">Content odd</div> 
     <div class="post">Content odd</div> 
     <div class="post">Content odd</div> 
    </div> 
    <!-- Even Posts --> 
    <div id="col-two"> 
     <div class="post">Content even</div> 
     <div class="post">Content even</div> 
     <div class="post">Content even</div> 
    </div> 
</div>

我發現這個小提琴http://jsfiddle.net/nick_craver/vmdaM/這似乎幾乎是解決方案，但它不是

來源

2015-06-06 CKDT

'：odd'和'：even'子選擇器，然後簡單地'append'他們你想要的地方 – GillesC

你的第一個元素實際上甚至是因爲它的索引爲0 – rsnorman15

幸運的是jQuery讓這相當容易，但它認爲第一個元素即使是因爲其索引爲0.因此，可以這樣寫：

var $oddPosts = $('.post:odd'); 
var $evenPosts = $('.post:even'); 

$oddPosts.wrapAll('<div class="col-one"></div>'); 
$evenPosts.wrapAll('<div class="col-two"></div>');

這裏是展示它的工作，並用正確奇一plunker，甚至div的標記：http://plnkr.co/edit/q7vH3RhwqJFCjTuQhJWi?p=preview

正如指出的那樣，這將導致即使職位，因爲jQuery的奇帖wrapAll在插入包裝之前出現第一個元素。爲了彌補這一點，只需要多一點的工作：

var $oddPosts = $('.post:odd'); 
var $evenPosts = $('.post:even'); 

var $oddPostsCol = $('<div class="col-1"></div>').append($oddPosts); 
var $evenPostsCol = $('<div class="col-2"></div>').append($evenPosts); 

$('#posts').append($oddPostsCol).append($evenPostsCol);

http://plnkr.co/edit/kbXkqWNzWPZXAGBWBBrB?p=preview

來源

2015-06-06 05:59:57 rsnorman15

謝謝，這對我有用，我將帖子克隆到一個新的div http://plnkr.co/edit/LHMaXD84KhN3YxR17JRf?p=preview .. 。唯一的「奇怪」的是，col-one和two應用於此g因爲指數差異而下單。任何想法？ – CKDT

所以你想奇怪的帖子總是第1列，並列第一？ – rsnorman15

聽起來好像這是你在找什麼：

oddDivs = $('div > div:nth-child(odd)'); 
evenDivs = $('div > div:nth-child(even)'); 
$('#col-one').append(oddDivs); 
$('#col-two').append(evenDivs);

來源

2015-06-06 05:57:11

PLZ檢查這個

<script> 
      $(document).ready(function(){ 
       var even=$('div div:even'); 
       even.wrapAll('<div class="col-1" ><div>') 
      }); 

     </script>

來源

2015-06-06 06:33:22

你的回答是否超過了接受的答案，在你的答案之前超過30分鐘的答案是更好的解釋？ – royhowie

找到奇數和偶數div並放入包含div

回答

相關問題