Jquery - Как чередовать: Нечетный: Четный шаблон каждые 4 <Divs>? - PullRequest
Новая
       19

Jquery - Как чередовать: Нечетный: Четный шаблон каждые 4 <Divs>?

4 голосов
/ 24 августа 2010

Я пытаюсь сделать шаблон в макете (см. Вложение для визуализации) Проблема в том, что использование: odd: even не работает.

Я пытался заставить его работать, используя "for loop" и операторы 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 (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

Ответы [ 6 ]

3 голосов
/ 24 августа 2010 
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++;
});​

по существу вы меняете тест для альтернативной ячейки в каждой строке.

1 голос
/ 24 августа 2010

Вы можете сделать что-то вроде этого 

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

1 голос
/ 24 августа 2010

Не знаю, как проходит ваша разметка, но вы можете использовать селектор : nth-child (n) для достижения эффекта шахматной доски. Я создал для вас пример здесь . Я не уверен, насколько он будет эффективен, хотя кажется, что он достаточно быстр для сетки 4х4. 

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

Это повторяет схему 2-го, 4-го, 5-го и 7-го каждые 8 ​​делений (8n). Если у вас сетка другого размера, вам придется настроить эти селекторы (и добавить к ним).

Намного проще, если вы используете таблицу - пример : 

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

Если вы хотите использовать 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"});​
0 голосов
/ 24 августа 2010

Это можно сделать в 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");
});

Это говорит о том, чтобы установить класс темноты для каждого четного деления в каждой четной строке и установить этот класс в нечетных делениях в нечетных строках.

0 голосов
/ 24 августа 2010

Привет. Все это сводит меня с ума.

Также то, что я не понимаю о переполнении стека, каким бы гениальным он ни был, это то, что вы не можете просто показать новые альтернативы одному и тому же вопросу ... Например, когда вы отвечаете, вы не можете просто вставить новый пример кода. если он вам задаёт вопрос ?! Что я тут не так делаю.

Так что теперь я отвечаю на мой вопрос, но на самом деле нет, я просто показываю проблему по-новому.

Так что, в любом случае, я пытаюсь сделать это всеми возможными способами, но без везения, буду очень признателен за помощь. Проверьте страницу, о которой идет речь, здесь 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");

     }

});
0 голосов
/ 24 августа 2010

другим способом сделать это будет [не проверено на функциональность, но демонстрируется логика]: 

 $('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(...);
                      }
        }

 });
...