возложите каждый 1-й и каждый 2 DIV в различном 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 и каждый пост классного класса, поставленный postRight. Причина, по которой я не сортирую их самостоятельно, заключается в том, что я использую post ajax и div, когда пользователь хочет получить больше сообщений. Скрипт должен работать с этим сценарием 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

Try используя :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>