把每一個第一次和每2格在不同的div

Question

我有這樣的代碼：

<div id="posts"> 
<div class="post">1st</div> 
<div class="post">2nd</div> 
<div class="post">1st</div> 
<div class="post">2nd</div> 
<div class="post">1st</div> 
<div class="post">2nd</div> 
</div> 

，我想這是什麼：

<div id="posts"> 
<div id="postsLeft"> 
<div class="post">1st</div> 
<div class="post">1st</div> 
<div class="post">1st</div> 
</div> 
<div id="postsRight"> 
<div class="post">2nd</div> 
<div class="post">2nd</div> 
<div class="post">2nd</div> 
</div> 
</div> 

所以我想每一個第一類崗位投入postLeft和每一個secound類的帖子投入postRight。我不會自己排序的原因是因爲我使用ajax和div class post是在用戶想要獲取更多帖子時加載的。腳本必須使用此腳本工作http://jsfiddle.net/tq6a202n/1/

Answer 1

一種可能的方法 - 你可以添加以下代碼

var postsLeft = $("<div></div>"); // create wrapper for left 
var postsRight = $("<div></div>"); // create wrapper for right 
postsLeft.attr("id", "postsLeft"); // add id for left 
postsRight.attr("id", "postsRight"); // add id for right 
var counter = 0; // counter to check for even and odd 
$("#posts").find("div.post").each(function(){ // iterate over post elements 
    if (counter % 2 === 0) { 
     postsLeft.append($(this).clone()); // For odd append here 
    } else { 
     postsRight.append($(this).clone()); // For even append here 

    } 
    counter++; // update counter 

}); 

$("#posts").html(""); // Empty div 
$("#posts").append(postsLeft); // Append left div 
$("#posts").append(postsRight); // Append right div 

僅供參考 - http://plnkr.co/edit/qIip2X8rTKi8naFiM27y?p=preview

Answer 2

你這裏工作示例答案：

$(document).ready(function() { 
 
$('#posts').append('<div id="postsLeft"></div><div id="postsRight"></div>'); 
 
    $('#posts div').not('#postsLeft,#postsRight').each(function() { 
 
     if($(this).text()=='1st'){ 
 
      $(this).appendTo('#posts #postsLeft'); 
 
     }else{ 
 
      $(this).appendTo('#posts #postsRight'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 

 
<div id="posts"> 
 
<div class="post">1st</div> 
 
<div class="post">2nd</div> 
 
<div class="post">1st</div> 
 
<div class="post">2nd</div> 
 
<div class="post">1st</div> 
 
<div class="post">2nd</div> 
 
</div>

Answer 3

利用:even選擇，.prependTo()，儘量.wrapAll()

$("<div />", {"id":"postsLeft", "html":$("#posts .post:even")}) 
 
.prependTo("#posts").siblings(".post").wrapAll("<div id=postsRight />");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="posts"> 
 
<div class="post">1st</div> 
 
<div class="post">2nd</div> 
 
<div class="post">1st</div> 
 
<div class="post">2nd</div> 
 
<div class="post">1st</div> 
 
<div class="post">2nd</div> 
 
</div>