Question

我正在尝试在布局中制作图案（请参阅附件以进行可视化）问题是使用：奇数：甚至不起作用。

我试图通过使用“for loops”和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链接

switch

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

不确定标记的用途，但您可以使用: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技术，在外部div中包装每4个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 3

你可以做这样的事情

$("#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 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

这可以在两行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上设置该类。

Jquery - 如何交替：奇数：偶数模式每4个<divs>？</divs>

6 个答案: