Question

假设我有以下html：

<div class="article">
 <div class="article_img"></div>
 <div class="article_preview"></div>
</div>

... article_img 和 article_preview 都有声明的宽度和高度，位置相对和 float：left; < / strong>所以他们将一个接一个地对齐。

我知道我可以使用$ (".article_preview").before($("article_img"));将 article_img 与 article_preview 切换，但我怎样才能为每个奇怪的文章执行此操作。文章？

Answer 1

你可以用CSS做到这一点：

div.article:nth-child(even) div.article_img {
    float:right;
}

如果你必须使用jQuery

$('div.article:nth-child(even)').each(function() {
    $(".article_img", this).before($("article_preview", this));
});

Answer 2

我知道这不完美，但会做到这一点

   $(".article:odd").each(function(i,e){
  
 $(this).children(".article_img").css("float","right");

  });

Answer 3

您可以执行以下操作：

$('.article').each(function(index) {
    if (index % 2 === 0) {
        var img = $(this).find('.article_img');
        $(this).find('.article_img').remove();
        $(this).find('.article_preview').before(img);
    }
});

对于每篇文章，检查它是否为奇数，然后在var中克隆图像（这样你可以将其删除），然后将其删除并在预览之前放置副本。

编辑：请使用此代码（在您的评论之后）：

$('.article').each(function(index) {
    if (index % 2 === 0) {
        $(this).find('.article_preview').css('float', 'right');
        $(this).find('.article_img').css('float', 'right');
    }
});

切换每个奇数容器的div位置

3 个答案: