1

我想为每个 X、Y 和 Z 元素添加一个类。

  $('.interactive-banner-faces>:nth-child(1)').addClass('rightTxt');
  $('.interactive-banner-faces>:nth-child(2)').addClass('rightTxt');
  $('.interactive-banner-faces>:nth-child(3)').addClass('rightTxt');
  $('.interactive-banner-faces>:nth-child(13)').addClass('rightTxt');
  $('.interactive-banner-faces>:nth-child(14)').addClass('rightTxt');
  $('.interactive-banner-faces>:nth-child(15)').addClass('rightTxt');
  $('.interactive-banner-faces>:nth-child(25)').addClass('rightTxt');
  $('.interactive-banner-faces>:nth-child(26)').addClass('rightTxt');
  $('.interactive-banner-faces>:nth-child(27)').addClass('rightTxt');

如您所见，我的第 n 个子选择器针对 1,2,3 和 13,14,15 等元素，没有任何模式，以上对我有用，我只是想知道这是否可以简化?

任何帮助是极大的赞赏

4

3 回答 3

7

您似乎想要选择每个12n + 1(1, 13, 25)、12n + 2(2, 14, 26) 和12n + 3(3, 15, 27) 元素。所以就这样做：

$('.interactive-banner-faces')
    .children(':nth-child(12n+1), :nth-child(12n+2), :nth-child(12n+3)')
    .addClass('rightTxt');

看看这篇文章，了解更多关于如何:nth-child工作的信息。简而言之：

n开始0并增加。所以12n + 1将首先选择12 * 0 + 1 = 1第一个元素，然后12 * 1 + 1 = 13是第 13 个元素，依此类推。

用于“组合”:nth-child选择器 ( ... , ... , ...) 的选择器称为多重选择器。

于 2013-08-12T09:19:10.257 回答
2 
var pos = [ 1, 2, 3, 13, 14, 15, 25, 26, 27 ];
for(i = 0; i < pos.length; i++) {
    $('.interactive-banner-faces:nth-child(' + pos[i] + ')').addClass('rightTxt');
}

另一种方法是首先获取所有元素，然后从它们的位置获取每个元素。

var pos = [ 1, 2, 3, 13, 14, 15, 25, 26, 27 ],
    $divs = $('.interactive-banner-faces');
for(i = 0; i < pos.length; i++) {
    var $div = $($divs.get(pos[i] - 1));
    $div.addClass('rightTxt');
}

注意pos[i] - 1, 因为.get()是从零开始的。

演示

于 2013-08-12T09:12:59.593 回答
1 
function class_add(x){
    $('.interactive-banner-faces>:nth-child('+x+')').addClass('rightTxt');
}

另一种方法使用$.each()

var index_1 = [ 1, 2, 3, 13, 14, 15, 25, 26, 27 ];
$.each(index_1,function class_add(i,value){
    $('.interactive-banner-faces>:nth-child('+value+')').addClass('rightTxt');
})
于 2013-08-12T09:12:42.747 回答