我有以下代码:
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)重新开始,而不是从上一个子级停止的地方继续。
最佳答案
像这样?
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
(索引)将是索引集合中项目的索引,而不是元素相对于其兄弟元素的索引,因此您看不到它被重置。
作为一种通用方法,如果您想更深入地添加类,它的 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];
}
对于输入:
<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>
关于javascript - 如何重复向元素添加类及其在每个起点重置的后代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20623947/