Geek asks and answers

JQuery selector: all but n first in a row

So, I have a list of brothers and sisters, such as:

  <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>

( Note: they b are not children a, they are all siblings. Indent for emphasis.)

In jQuery, I need to select each bby running the first n elements in a row. There is no specific type / class of element that breaks the strip, nor is there any reliable number bin the intermediate or non- belement between them.

If I used a selector to add a class selectedand assuming n = 2, then my DOM would look like this:

  <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>

In other words, select each b, with the exception of n elements after anything other than b, or the beginning.

:nth-child(n+3), , , b, a, .

.nextUntil() .filter(), , . ?

+5
2

- , , - :

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

n .b + n .b.

:nth-child() /, CSS, .

jsFiddle preview

.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>');
+7

CSS

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

http://jsfiddle.net/vwrP6/

0

More articles: