为每 2、5、8、11 等类元素添加边距

Posted 2023-03-06

【中文标题】为每 2、5、8、11 等类元素添加边距

【英文标题】：Add margin to every 2nd, 5th, 8th, 11th etc. class element

【发布时间】：2014-03-09 02:47:00

【问题描述】：

我有一个网页填充了相同类元素的可变编号。我想为每个第 2、第 5、第 8、第 11 等类（如果存在）设置一个左右边距。

有没有办法用 javascript 实现这一点？我不想使用 css3 子选择器，因为它在旧浏览器上不兼容。

我的 div 是这样放置的：

[div class="block"][div class="block"][div class="block"]

[div class="block"][div class="block"][div class="block"]

[div class="block"][div class="block"][div class="block"]

[div class="block"][div class="block"][div class="block"]

我希望每个中间 div 左右都有一个边距。

谢谢。 :)

【参考方案1】：

尝试使用来自 jQuery 的 nth-child 选择器

$('div:nth-child(3n - 1)').css('margin-top', '10px')

演示：Fiddle

【讨论】：

不确定使用它的含义是什么（可能没有），但 (3n - 1) 将导致第一个孩子为 -1，因为第 n 个孩子的公式为 ((3x0) - 1 )、((3x1) - 1)、((3x2) - 1) 等

【参考方案2】：

试试这个。

i = 2;
block(i);

function block(i) 

    $(".block:eq(" + i + ")").css("margin-left":"10px" ,"margin-right":"20px" );

    i = i + 3;

    block(i);

【参考方案3】：

如果您不想使用 CSS3 子选择器，则必须在服务器端或使用 JavaScript 进行。

由于您已使用 jQuery 标记答案，我假设这是您的首选，因此您可以尝试以下方法：

$('.block:nth-child(3n+2)').addClass('middle');