Jquery - 如何交替：奇数：偶数模式每4< Divs>？ [英] Jquery - How to alternate an :Odd :Even pattern every 4 <Divs>?

问题描述

我想在布局中做一个模式（见附件可视化）
问题是使用：odd：甚​​至不工作。

I'm trying to make a pattern in a layout (see attachment for visualisation) The problem is that using :odd :even doesnt work.

我试图使其工作通过使用for循环和if语句，但显然jquery不这样做这个东西。或者也许我应该在文档准备语句外做它？

I've tried to make it work by using "for loops", and if statements, but obviously jquery doesn't do this stuff in that way. Or maybe i'm supposed to do it outside the document ready statement? I tired that to but it just doesnt work.

这是怎么回事？

strong> 重要注意事项... 这些方格在一个页面上最多为8个字符，在Wordpress中生成，每个正方形都是一个帖子。

Important note... These squares are max 8 on a page and generated in Wordpress, each square being a post. So I'm not able to divide things into rows as suggested unfortunately.

css：

.thumb_container {
width:274px;
height: 274px;
float: left;
position: relative;
background-color: white;
}

 .thumb_container:nth-child(4n+1) { clear:both; background-color: green } /* green just to see if its working */

Jquery tweek文件 http：// baked-beans。 tv / bb / wp-content / themes / bakedbeans / js / jquery.site.tweeks.js ）

Jquery tweek file (http://baked-beans.tv/bb/wp-content/themes/bakedbeans/js/jquery.site.tweeks.js)

    $(".thumb_container:nth-child(8n+2), .thumb_container:nth-child(8n+4), .thumb_container:nth-child(8n+5), .thumb_container:nth-child(8n+7)")
.css({"background-color":"#333333"});

HTML 点击HTML链接

推荐答案

var i = 1;
$('#wrapper > div').each(function()
{
    var isEvenRow = Math.ceil(i / 4) % 2 == 0; // 4 is number of columns
    var isCellAlternate = i % 2 == isEvenRow ? 0 : 1;

    if ( isCellAlternate ) {
        $(this).css("background-color", "#000");
    } else {
        $(this).css("background-color", "#ccc");
    }
    i++;
});​

或较不可读但较短的版本：

or the less readable but shorter version:

var i = 1;
$('#wrapper > div').each(function() {
    if (i % 2 == (Math.ceil(i / 4) % 2 == 0) ? 0 : 1) $(this).css("background-color", "#000");
    else $(this).css("background-color", "#ccc");
    i++;
});​

本质上你改变每行的替代单元格的测试。

essentially you change the test for the alternate cell every row.

这篇关于Jquery - 如何交替：奇数：偶数模式每4< Divs>？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！