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>

换句话说，除了 n 元素之外，选择除b之外的所有b或开头。

我已尝试:nth-child(n+3)，但这似乎只考虑了所有b，尽管a打破了它们。

我也尝试摆弄.nextUntil()和.filter()，但是必须采取比我更好的人来解决这个问题。想法？

Answer 1

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

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

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

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

jsFiddle preview

如果需要在每组.b + .b + .b元素之前添加一个中间元素，请先添加该类，然后在每组匹配元素的第一组之前添加中间元素。可以通过查看不是 .selected的元素来匹配这些元素中的第一个，这排除了所拥有的所有内容{{1}直接在它后面：

.selected

Updated jsFiddle preview

如果链接太多方法令人困惑，您可以随时单独执行每一步：

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

Answer 2

的CSS：

.b+.b+.b {
    color: red;
}

http://jsfiddle.net/vwrP6/

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

2 个答案: