javascript - jQueryセレクター：nを除くすべてが行の最初

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要素もありません。

セレクターを使用してクラスを追加し、nselected = 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

私は試しましたが、それはそれらを壊す'sにもかかわらず、: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>');

Answer 2

css：

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

http://jsfiddle.net/vwrP6/