jQuery - применить стиль к центру div в строке из трех столбцов?

Question

Я пытаюсь добавить границы к среднему столбцу в строке из трех столбцов. Это:

var subcount = $j('#sub > div').size();

Дает мне 6, и я пытаюсь понять, как применить стиль к элементам в середине? (в этом случае, div 2 и div 5)

<div id="sub">
<div>div 1</div> <div>div 2</div> <div>div3</div>
<div>div 4</div> <div>div 5</div> <div>div6</div>
</div>

Есть ли способ сделать это на основе div #, а не id? Например, какой-то цикл foreach или что-то в этом роде?

Answer 1

Есть много способов сделать это. Это зависит от того, как структурированы ваши данные. Путь грубой силы, если есть только 6 столбцов:

$("#sub > div:nth-child(2), #sub > div:nth-child(5)").css("border", "1px solid black");

Вы также можете использовать уравнение с :nth-child:

$("#sub > div:nth-child(3n+2)").css("border", "1px solid black");

Answer 2

Поскольку массив, возвращаемый JQuery, индексируется нулем, просто запустите что-то вроде этого для элементов "div" 2 и 5:

$(document).ready(function () {
    $("#sub div").filter( function (i) {
        return i == 1 || i == 4;
    }).css("background", "#b4b0da");
});

Answer 3

Я предложу вам добавить некоторый класс в коде, а затем применить класический селектор. Или, лучше, стиль CSS.

Если вам нужно использовать jQuery, решение для cletus - это то, что вам нужно.

Answer 4

Если это действительно столбцы, вам лучше использовать реальную таблицу, так как она лучше подходит для табличных данных. Вы также не отметили свои строки, что затрудняет выбор столбцов. Один из способов сделать это будет следующим:

var n = 1;
$('#sub > div').filter(function() { return n++ % 3 == 2 });