Seletor jQuery “All but not”

89

Posso selecionar (usando jQuery) todos os divs em uma marcação HTML da seguinte maneira:

$('div')

Mas eu quero excluir um determinado div(digamos, ter id="myid") da seleção acima.

Como posso fazer isso usando funções Jquery?

javascript jquery jquery-selectors

— siva636
fonte

2

use o seletor não em jquery

— abhijit

170

Simples:

$('div').not('#myid');

O uso de .not()removerá os elementos correspondentes ao seletor fornecido a ele do conjunto retornado por $('div').

Você também pode usar o :not()seletor:

$('div:not(#myid)');

Ambos os seletores fazem a mesma coisa, porém :not()é mais rápido , presumivelmente porque o motor do seletor do jQuery, Sizzle, pode otimizá-lo para uma .querySelectorAll()chamada nativa .

— Bojangles
fonte

1

@Raynos Não acho que seja necessariamente ruim , mas usar .not()é muito, muito melhor do que :not().

— Bojangles

1

Acho que deveria ser $('div:not(#myid)');(sem aspas). @Raynos: Por quê? :not()é um seletor CSS3. jQuery pode passar diretamente o seletor para querySelectorAllse for suportado ...

— Felix Kling

@FelixKling funciona como parte dos seletores4 . No entanto, em jQuery é mais lento .note menos legível. Eu deveria ter dito ": não seletor em jQuery"

— Raynos

@Raynos: Nenhuma especificação do Seletor jamais permitiu cotações dentro :not(). Este seletor também não é novo no Seletor 4, nem foi alterado para permitir cotações. No entanto, ele foi alterado para permitir seletores mais complexos. A menos que eu não tenha entendido seu comentário ...

— BoltClock

1

@PeterKrauss Acabei de fazer um benchmark jsPerf que marca querySelectorAllcomo o mais rápido. Não é um benchmark do mundo real, mas é esperado visto que não há sobrecarga do jQuery interno. :not()é de fato mais rápido, provavelmente porque Sizzle sabe que pode otimizá-lo para usoquerySelectorAll()

— Bojangles

9

var els = toArray(document.getElementsByTagName("div"));
els.splice(els.indexOf(document.getElementById("someId"), 1);

Você poderia simplesmente fazer isso à moda antiga. Não há necessidade de jQuery com algo tão simples.

Dicas profissionais:

Um conjunto de elementos dom é apenas um array, então use seu toArraymétodo favorito em a NodeList.

Adicionar elementos a um conjunto é apenas

set.push.apply(set, arrOfElements);

Remover um elemento de um conjunto é

set.splice(set.indexOf(el), 1)

Você não pode remover facilmente vários elementos de uma vez :(

— Raynos
fonte

1

Hoje em dia (2017) talvez o uso de Javascript nativo .querySelector()ou .querySelectorAll()com div:not(#myid) seja mais rápido ... É?

— Peter Krauss

7

$("div:not(#myid)")

^[doc]

ou

$("div").not("#myid")

^[doc]

são as principais formas de selecionar todos, exceto um id

Você pode ver a demonstração aqui

— gênese
fonte

Hoje (2017) talvez $("div:not(#myid)") seja mais rápido ... Verifique a otimização do sizzlejs para ele, ao usar Javascript nativo .querySelector()ou .querySelectorAll().

— Peter Krauss

4

   var elements =  $('div').not('#myid');

Isso incluirá todos os divs, exceto aquele com id 'myid'

— Ehtesham
fonte

3

$('div:not(#myid)');

isso é o que você precisa, eu acho.

— abhijit
fonte

3

Isso deve resolver:

$('div:not("#myid")')

— iappwebdev
fonte

3

Você usa a .notpropriedade da biblioteca jQuery:

$('div').not('#myDiv').css('background-color', '#000000');

Veja em ação aqui . O div #myDiv será branco.

— Kyle
fonte