JQuery не первый дочерний селектор

У меня есть следующая разметка:

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

Я хочу показать только divs другого имени класса, например. class= "todo" и сохранить заголовок "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);
});

Все работает отлично, за исключением бит, где я пытаюсь исключить первый дочерний элемент с именем класса заголовка даты:

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

Может ли кто-нибудь предложить альтернативу?

Ответы

Ответ 1

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

Должно это сделать.

slice Является самой быстрой функцией!

Потому что: во-первых, это расширение jQuery, а не часть спецификации CSS, запросы с использованием: сначала не могут воспользоваться повышением производительности, предоставляемым встроенным методом DOM querySelectorAll().

Альтернативный способ, который все еще использует функцию querySelectorAll:

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

Ответ 2

.not('div:first.date-header') должен быть .not('.date-header:first')

Ответ 3

Как отметил @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>