JQuery выбрать все, кроме первого - PullRequest
Новая
       30

JQuery выбрать все, кроме первого

255 голосов
/ 14 февраля 2010

В jQuery как использовать селектор для доступа ко всем элементам, кроме первого? Таким образом, в следующем коде будет доступен только второй и третий элемент. Я знаю, что могу получить к ним доступ вручную, но может быть любое количество элементов, так что это невозможно. Спасибо. 

<div class='test'></div>
<div class='test'></div>
<div class='test'></div>

Ответы [ 4 ]

548 голосов
/ 14 февраля 2010 
$("div.test:not(:first)").hide();

или 

$("div.test:not(:eq(0))").hide();

или 

$("div.test").not(":eq(0)").hide();

или 

$("div.test:gt(0)").hide();

или: (согласно комментарию @Jordan Lev): 

$("div.test").slice(1).hide();

и т. Д.

См:

29 голосов
/ 18 января 2015

Из-за способа оценки селекторов jQuery справа налево , вполне читаемый li:not(:first) замедляется этой оценкой.

Столь же быстрое и простое для чтения решение использует версию функции .not(":first"):

, например 

$("li").not(":first").hide();

JSPerf: http://jsperf.com/fastest-way-to-select-all-expect-the-first-one/6

Это всего на несколько процентных пунктов медленнее, чем slice(1), но очень хорошо читается как "Я хочу все, кроме первого".

3 голосов
/ 22 марта 2017

Мой ответ сфокусирован на расширенном случае, полученном из приведенного сверху.

Предположим, у вас есть группа элементов, от которой вы хотите скрыть дочерние элементы, кроме первого. Как пример: 

<html>
  <div class='some-group'>
     <div class='child child-0'>visible#1</div>
     <div class='child child-1'>xx</div>
     <div class='child child-2'>yy</div>
  </div>
  <div class='some-group'>
     <div class='child child-0'>visible#2</div>
     <div class='child child-1'>aa</div>
     <div class='child child-2'>bb</div>
  </div>
</html>

  1. Мы хотим скрыть все .child элементы в каждой группе. Так что это не поможет, потому что будут скрыты все элементы .child кроме visible#1: 

    $('.child:not(:first)').hide();

  2. Решение (в этом расширенном случае) будет: 

    $('.some-group').each(function(i,group){
    $(group).find('.child:not(:first)').hide();
});
1 голос
/ 25 октября 2017 

$(document).ready(function(){

  $(".btn1").click(function(){
          $("div.test:not(:first)").hide();
  });

  $(".btn2").click(function(){
           $("div.test").show();
          $("div.test:not(:first):not(:last)").hide();
  });

  $(".btn3").click(function(){
          $("div.test").hide();
          $("div.test:not(:first):not(:last)").show();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn1">Hide All except First</button>
<button class="btn2">Hide All except First & Last</button>
<button class="btn3">Hide First & Last</button>

<br/>

<div class='test'>First</div>
<div class='test'>Second</div>
<div class='test'>Third</div>
<div class='test'>Last</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...