jQuery - 在三列行中将样式应用于中心div？

Question

我正在尝试在三列行的中间列添加边框。这样：

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

给我6，我想弄清楚如何将风格应用于中间的div？ （在这种情况下，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

如果这些确实是列，那么使用真实表可能会更好，因为它更适合于表格数据。您还没有标记行，这使得选择列很困难。一种方法是：

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

Answer 3

我建议你在代码中添加一些类，然后应用一个clase选择器。或者，更好的是，css风格。

如果你必须使用jQuery，那么cletus解决方案就是你想要的。

Answer 4

由于JQuery返回的数组是零索引的，只需为“div”元素2和5运行类似的东西：

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