36

次のマークアップがあります。

<div class="feed-item">
  <div class="date-header">2012-06-03</div>
</div>
<div class="feed-item">
  <div class="todo">Todo</div>
</div>
<div class="feed-item">
  <div class="meeting">meeting</div>
</div>

class="todo" などの別のクラス名の div のみを表示し、"date-header" を表示したままにします。私は次のJavaScriptを持っています」

$('.feed-cluster,.feed-item-container').not('div:first.date-header').not(className).slideUp(speed, function(){
      $('.feed-cluster' + className + ',.feed-item-container' + className).slideDown(speed);
});

date-header のクラス名を持つ最初の子を除外しようとしている部分を除いて、すべて正常に動作します。

.not('div:first.date-header')

誰かが代替案を提案できますか?

4

3 に答える 3

62 
$('div.date-header').slice(1);

それをする必要があります。

slice最速の機能です！

：firstはjQuery拡張機能であり、CSS仕様の一部ではないため、：firstを使用するクエリでは、ネイティブDOM querySelectorAll（）メソッドによって提供されるパフォーマンスの向上を利用できません。

まだ querySelectorAll関数を使用する別の方法：

$('div.date-header').not(':first');
于 2012-06-22T07:37:43.847 に答える
26

.not('div:first.date-header')する必要があります.not('.date-header:first')

于 2012-06-22T07:37:17.213 に答える
7

@gdoron が指摘したように:は仕様:firstの一部ではありませんが、あります。すべての主要なブラウザでサポートされています。css:not():first-child

cssしたがって、これを使用して、内部のセレクターを使用して最初の子をスキップすることもできますjQuery。

$(".child:not(:first-child)").css("background-color", "blue");
div.child {
  background-color: #212121;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="child">
    <p>Im a child of .container</p>
  </div>
  <div class="child">
    <p>Im a child of .container</p>
  </div>
  <div class="child">
    <p>Im a child of .container</p>
  </div>
</div>

レガシーブラウザのサポート

レガシーブラウザをサポートする必要がある場合、または:not()セレクターが妨げになっている場合。.child + .childセレクターを使用できます。これも機能します。

$(".child + .child").css("background-color", "blue");
div.child {
  background-color: #212121;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="child">
    <p>Im a child of .container</p>
  </div>
  <div class="child">
    <p>Im a child of .container</p>
  </div>
  <div class="child">
    <p>Im a child of .container</p>
  </div>
</div>

于 2018-01-02T11:37:37.357 に答える