将 class 添加到在整页而不是父元素中找到的元素的第 n 个

Question

我正在尝试将 classes 添加到特定元素的 "nth" - 无论它位于页面的哪个位置。我的 html 的简化版本是：

<div class="row">
    <div class="col-sm-12"><section class="subsection"></section></div>
    <div class="col-sm-12"><section class="subsection"></section></div>
</div>
<div class=“row”>
    <div class="col-sm-12"><section class="subsection"></section></div>
    <div class="col-sm-12"><section class="subsection"></section></div>
</div>
<div class=“row”>
    <div class="col-sm-12"><section class="subsection"></section></div>
    <div class="col-sm-12"><section class="subsection"></section></div>
</div>
etc...

这就是我在 jQuery:

中使用的

$( ".subsection:nth-of-type(4n+1)" ).addClass("first-row");

$( ".subsection:nth-of-type(4n+2)" ).addClass("second-row");

$( ".subsection:nth-of-type(4n+3)" ).addClass("third-row");

$( ".subsection:nth-of-type(4n)" ).addClass("fourth-row");

正如预测的那样，它将每个 .subsection 识别为第一个子部分，但我试图将其作为完成的输出：

<div class="row">
    <div class="col-sm-12"><section class="subsection first-row"></section></div>
    <div class="col-sm-12"><section class="subsection second-row"></section></div>
</div>
<div class=“row”>
    <div class="col-sm-12"><section class="subsection third-row"></section></div>
    <div class="col-sm-12"><section class="subsection fourth-row"></section></div>
</div>
<div class=“row”>
    <div class="col-sm-12"><section class="subsection first-row"></section></div>
    <div class="col-sm-12"><section class="subsection second-row"></section></div>
</div>
etc...

任何人都知道我怎样才能做到这一点？我还尝试了 nth-child、.filter()、section[class="subsection"] 以及其他一些方法来解决这个问题，但一直无法弄清楚。

我觉得这 post 听起来很混乱。如果您需要我澄清，请告诉我...:)

--- 已编辑：表明它需要在每次点击“4n”第 n 类型时循环

Answer 1

只需使用 $('section.subsection')，然后使用 .eq() 或 .each。参见这个 fiddle 例如：http://jsfiddle.net/0q3gk194/

编辑：为了每 4 次重复一次，使用 .each() 并打开提供的索引模 4。更新 fiddle：http://jsfiddle.net/0q3gk194/1/

Answer 2

由于您使用的是 jQuery，因此您可以使用 eq().

获取特定选择器的 nth-child

HTML

<div class="row">
    <div class="col-sm-12"></div>
    <div class="col-sm-12"></div>
    <div class="col-sm-12"></div>
</div>
<div class="row">
    <div class="col-sm-12"></div>
    <div class="col-sm-12"></div>
</div>
<div class="row">
    <div class="col-sm-12"></div>
    <div class="col-sm-12"></div>
    <div class="col-sm-12"></div>
    <div class="col-sm-12"></div>
</div>

jQuery

$(document).ready(function(){
    $('.col-sm-12').filter(function(i, item){
        if(i != 0 && (i+3)%3 == 0) {
          $(item).css( 'background-color', 'red');
        }
    });
});

将使每第 4 个 .col-sm-12 元素具有红色背景。

这是 full demo on jsFiddle。

将 class 添加到在整页而不是父元素中找到的元素的第 n 个

Add class to nth of an element found on full page instead within a parent

jquery

jquery-selectors

element

addclass