Jquery - 如何每 4 个 <Divs> 交替一个 :Odd :Even 模式？

Question

我正在尝试在布局中制作图案（请参阅附件进行可视化） 问题是使用 :odd :even 不起作用。

我试图通过使用“for 循环”和 if 语句来使其工作，但显然 jquery 不会以这种方式做这些事情。或者也许我应该在文档准备声明之外做它？我厌倦了它，但它不起作用。

如何做到这一点？

编辑：重要提示... 这些方块在一页上最多 8 个，并在 Wordpress 中生成，每个方块都是一个帖子。所以不幸的是，我无法按照建议将事物分成几行。

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)

    $(".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链接

Answer 1

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++;
});​

或可读性较差但较短的版本：

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++;
});​

基本上你每行更改备用单元格的测试。

Answer 2

你可以这样做

$("#wrapper > :nth-child(8n+1), #wrapper > :nth-child(8n+3), #wrapper > :nth-child(8n+6), #wrapper > :nth-child(8n+8)").addClass('dark');

使用此 HTML：

<div id="wrapper">
    <div></div>
    ... 16 divs
<div>

还有这个 CSS：

#wrapper {
    width: 160px;
    border: 1px solid #999;
    overflow: hidden;
}

#wrapper div {
    width: 40px;
    height: 40px;
    float: left;
    background-color: #fff;
}

#wrapper .dark {
    background-color: #f5f5f5;
}

在此处使用包装器有助于您无需为每个 div 添加一个类，而且您绝对不需要两个不同的类或颜色 - 只需定义一个“默认”颜色，然后用添加的颜色覆盖它班级。哦，:odd、:even 和 nth-child 选择器适用于它们附加到的元素 - 在您的情况下，.thumb_container 元素。 .thumb_container > :even 可以工作，以供将来参考。

在此处查看实际代码：http://jsfiddle.net/HjMrx/

Answer 3

不确定您的标记是如何进行的，但您可以使用:nth-child(n) 选择器来实现棋盘格效果。我已经为您设置了一个示例here。我不确定它的效率如何，尽管它对于 4x4 网格来说似乎足够快。

$("div:nth-child(8n+2),div:nth-child(8n+4),div:nth-child(8n+5),div:nth-child(8n+7)")
    .css({"background-color":"white"});​

这会在每 8 个 div (8n) 的第 2、第 4、第 5 和第 7 个重复模式。如果您有不同大小的网格，则必须调整这些选择器（并添加到它们）。

如果您使用的是表格，那就更简单了 - example:

$("tr:odd > td:even, tr:even > td:odd").css({"background-color":"white"});​

如果您愿意使用包装 div，您可以使用 rows 技术，将每 4 个 div 包装在一个外部 div 中并使用：

<div class="row"><div>1</div><div>2</div><div>3</div><div>4</div></div>
<div class="row"><div>1</div><div>2</div><div>3</div><div>4</div></div>
<div class="row"><div>1</div><div>2</div><div>3</div><div>4</div></div>
<div class="row"><div>1</div><div>2</div><div>3</div><div>4</div></div>

$(".row:odd > div:even, .row:even > div:odd").css({"background-color":"white"});​

Answer 4

另一种方法是[未验证功能但演示逻辑]：

 $('div').click(function(e){
  $tester=$(this).children('div.Other').size();
        for(var $j=0;$j<$tester;$j=$j+1){
                      if($j%2==0){
              $(this).children().eq($j).css(...);
                      }else{
                              $(this).children().eq($j).css(...);
                      }
        }

 });

Answer 5

嗨，这一切都让我精神崩溃。

关于 Stack Overflow，我不明白的是，尽管它是天才，但你不能只为同一个问题展示新的替代方案......就像当你回答时，你不能只在其中放入新的代码示例如果你是他问这个问题的人？！我在这里做错了什么。

所以现在我正在回答我的问题，但实际上不是，我只是以一种新的方式展示问题。

所以无论如何，我正在尽一切可能尝试这个，没有运气，真的很感谢这里的一些帮助。在此处查看有问题的页面http://baked-beans.tv/bb

它应该像这个线程的第一篇文章所示那样制作一个网格，但它并没有像它应该的那样交替。

:nth-child(4n+4) 在我使用 jsfiddler 时有效，但在 wordpress 中无效，这就是难题。为什么 wordpress 会搞砸呢？

    function oddRow() {
        $(".thumb_container:odd").css("background-color", "#f00");
        $(".thumb_container:even").css("background-color", "#fff");

    };

    function evenRow() {
        $(".thumb_container:odd").css("background-color", "#fff");
        $(".thumb_container:even").css("background-color", "#f00");
    };


$('.thumb_container').each(function(i) {

     i=(i+1);

     if (i%4==0 ){

        if (switchMe == false){
        switchMe = true;
        }

        else if (switchMe == true){
        switchMe = false;
        }
     }

     if (switchMe == false){
        oddRow();
        $(this).css("background-color", "#000");

     } else if (switchMe == true){
        evenRow();
        $(this).css("background-color", "#000");

     }

});

Answer 6

这可以在 2 行 jquery 中完成。

这是我为此使用的 HTML 格式：

<div id="container">
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</div>

CSS：

#container {
        width: 816px;
        margin: 0 auto;
    }
    #container .row div {
        width: 100px;
        height: 100px;
        float: left;
        background: #fff;
        border: 1px solid black;
    }
    .dark {
        background: #000 !important;
    }

jquery:

$(document).ready(function() {
        $("#container .row:nth-child(even) div:nth-child(even)").addClass("dark");
        $("#container .row:nth-child(odd) div:nth-child(odd)").addClass("dark");
});

这告诉它为每个偶数行上的每个偶数 div 设置一个暗类，并在奇数行的奇数 div 上设置该类。