jQuery选择器:连续排在第一位

Question

所以我有一份像这样的兄弟姐妹名单;

  <div class="b"></div>
<div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
<div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
<div class="a"></div>
<div class="c"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>

(注:本b的是没有了的孩子a的,他们是所有兄弟缩进是重点.)

在jQuery中,我需要选择每个b,放弃条纹中的前n个元素.没有特定类型/类别的元素可以打破条纹,条纹中没有任何可靠的元素b,或者b它们之间的非元素.

如果我使用选择器添加一个类selected,并假设n = 2,那么我的DOM就会如此;

  <div class="b"></div>
<div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b selected"></div>
  <div class="b selected"></div>
<div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
<div class="a"></div>
<div class="c"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b selected"></div>
  <div class="b selected"></div>
  <div class="b selected"></div>
  <div class="b selected"></div>
  <div class="b selected"></div>

换句话说,在b除了或开头之外的任何东西之外选择除n个元素之外的每个元素b.

我试过了:nth-child(n+3),但这似乎只考虑了所有的b问题,尽管a它们打破了它们.

我也试图与摆弄周围.nextUntil()和.filter(),但必须采取更好的人比我破解这个.想法？

Answer 1

由于这些元素都是共享同一个父元素的兄弟元素,因此巧妙使用兄弟组合器可以解决这个问题:

$('.b + .b + .b').addClass('selected');

对于任何n,只需在最后一次之前重复.b + n次.b.

不需要:nth-child()或任何遍历/过滤功能,并且也是一个有效且受到良好支持的CSS选择器,以防您希望将样式应用于这些元素.

jsFiddle预览

如果需要在每组元素之前添加一个中间元素,请先.b + .b + .b添加该类,然后在每组匹配元素的第一组之前添加中间元素.首先,这些元素可以通过寻找其背后的一个元素相匹配是不是 .selected,这排除了一切,确实有.selected直接背后:

$('.b + .b + .b').addClass('selected')
                 .filter(':not(.selected) + .selected')
                 .before('<div class="inserted"></div>');

更新了jsFiddle预览

如果链接太多方法会让人感到困惑,您可以随时分别执行每个步骤:

$('.b + .b + .b').addClass('selected');
$(':not(.selected) + .selected').before('<div class="inserted"></div>');