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>

我发现这个小提琴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>');

这是一个羽毛球，显示它正常工作，并且标有正确的奇数，偶数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

Answer 2

听起来这就是你要找的东西：

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

Answer 3

Plz检查这个

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

        </script>

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

3 个答案: