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类帖子在用户想要获得更多帖子时加载。脚本必须使用此脚本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()

＆＃13;

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

＆＃13;

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

＆＃13;

将每个第1和第2个div放在不同的div中

3 个答案: