javascript - 找到奇数和偶数div并放入包含div中

Question

我正在尝试解决一些本来应该非常简单的问题。但实际上比我想象的要棘手一些。我正在创建一个 Tumblr 主题，并且有一个包含 div 中所有帖子的列表。对于我的布局，我需要两个单独的 div，其中包含所有偶数和奇数帖子。我怎样才能用基本的jquery实现这样的事情？

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

我找到了这个 fiddle http://jsfiddle.net/nick_craver/vmdaM/这似乎几乎是解决方案，但事实并非如此

Answer 1

幸运的是，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