5

所以我有一个像这样的兄弟姐妹名单；

  <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 's不是's的孩子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()and .filter()，但必须比我更好的人来破解它。想法？

4

2 回答 2

7

由于这些元素都是共享同一个父元素的兄弟元素，因此可以巧妙地使用兄弟元素组合器：

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

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

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

jsFiddle 预览

如果您需要在每组元素之前添加一个中间元素，请先.b + .b + .b添加类，然后在每组匹配元素的第一个之前添加中间元素。这些元素中的第一个可以通过在它后面寻找一个not .selected的元素来匹配，它排除了所有在它.selected后面直接有 a的元素：

$('.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>');
于 2013-02-03T14:56:34.757 回答
0

CSS：

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

http://jsfiddle.net/vwrP6/

于 2013-02-03T15:30:22.757 回答