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

Respostas:

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