javascript - 如何重复向元素添加类及其在每个起点重置的后代

Question

我有以下代码:

var classes = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth'];
$('section').addClass(function(i, c) {
  return classes[i % classes.length];
});

$('section > div').each(function(i, el) {
  $(this).addClass(classes[i  % classes.length]);
});

这会创建以下示例:

<section class="first">
    <div class"first"></div>
        <div class"first"></div>
        <div class"second"></div>
    <div class="second"></div>
</div>
<section class="second">
    <div class="third"></div>
</div>
<section class="third">
    <div class="fourth"></div>
</div>

我想弄清楚如何让循环重置每个 div。因此，例如，每个部分的子级将从第一个类(class)重新开始，而不是从上一个子级停止的地方继续。

Answer 1

像这样？

var classes = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth'];
$('section').addClass(function (i, c) {
     $(this).children('div').addClass(function (i) { //Do an addClass for children divs
        return classes[i % classes.length]; //return the class based on its index
    });
    return classes[i % classes.length]; //return the class for section based on its index
});

您的代码段中的问题是 'section > div' 选择器会将所有部分中的所有 div 作为集合返回，而 i (索引)将是索引集合中项目的索引，而不是元素相对于其兄弟元素的索引，因此您看不到它被重置。

Demo

作为一种通用方法，如果您想更深入地添加类，它的 child 可以尝试这种方式:

var classes = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth'];
$('section').addClass(addClassToChild);


function addClassToChild(i) {
    $(this).children().addClass(addClassToChild);
    return classes[i % classes.length];
}

Demo

对于输入:

<section>Section1
    <div>S1 D1
        <div>S1 D1 D1</div>
        <div>S1 D1 D2</div>
    </div>
    <div>S1 D2</div>
</section>
<section>Section2
    <div>S2 D1
        <div>S2 D1 D1</div>
    </div>
</section>
<section>Section3
    <div>S3 D1
        <div>S3 D1 D1</div>
        <div>S3 D1 D2</div>
    </div>
    <div>S3 D2</div>
</section>

将输出为:

 <section class="first">Section1
    <div class="first">S1 D1
        <div class="first">S1 D1 D1</div>
        <div class="second">S1 D1 D2</div>
    </div>
    <div class="second">S1 D2</div>
</section>
<section class="second">Section2
    <div class="first">S2 D1
        <div class="first">S2 D1 D1</div>
    </div>
</section>
<section class="third">Section3
    <div class="first">S3 D1
        <div class="first">S3 D1 D1</div>
        <div class="second">S3 D1 D2</div>
    </div>
    <div class="second">S3 D2</div>
</section>