javascript - 对于每个 X Y 和 Z 元素，使用 jQuery 添加类

Question

我想为每个 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 等元素，没有任何模式，以上对我有用，我只是想知道这是否可以完全简化了吗？

非常感谢任何帮助

Answer 1

您似乎想要选择每个 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');

看看this article了解有关 :nth-child 工作原理的更多信息。简而言之:

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

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