jQuery: Verifique se existe div com determinado nome de classe


235

Usando jQuery, estou programaticamente gerando um monte de div's como este:

<div class="mydivclass" id="myid1">Some Text1</div>
<div class="mydivclass" id="myid2">Some Text2</div>

Em outro lugar do meu código, preciso detectar se esses DIVs existem. O nome da classe para as divs é o mesmo, mas o ID é alterado para cada div. Alguma idéia de como detectá-los usando o jQuery?

Respostas:


424

Você pode simplificar isso verificando o primeiro objeto retornado do JQuery da seguinte maneira:

if ($(".mydivclass")[0]){
    // Do something if class exists
} else {
    // Do something if class does not exist
}

Nesse caso, se houver um valor verdadeiro no primeiro [0]índice ( ), suponha que a classe exista.

Edit 04/10/2013: Criei um caso de teste jsperf aqui .


Bom ponto, de qualquer forma, é apenas uma pesquisa de propriedade. Eu não me importo sobre os quatro caracteres, mas isso poderia ser mais clara dependendo do contexto ...
TJ Crowder

Acabei usando esta solução, embora existam outras soluções que também funcionam. Obrigado pelas respostas rápidas.
avatar

1
Curiosamente, você pode pensar que jogar um :firstlá ajudaria o desempenho (não sei se o desempenho é um critério importante para o @itgorilla), mas se ele varia muito de acordo com o navegador, provavelmente porque altera os recursos nativos que o jQuery pode usar para fazer o seleção. Aqui está um caso de teste em que a div existe e outro onde ela não existe .
TJ Crowder

E se eu não quiser executar um código se uma classe não existir?
Thomas Sebastian

1
@ThomasSebastian Tryif (!$(".mydivclass")[0]){ /* do stuff */ }
Shaz

117

Você pode usar size(), mas o jQuery recomenda o uso do comprimento para evitar a sobrecarga de outra chamada de função:

$('div.mydivclass').length

Assim:

// since length is zero, it evaluates to false
if ($('div.mydivclass').length) {

http://api.jquery.com/size/

http://api.jquery.com/length/

ATUALIZAR

A resposta selecionada usa um teste de desempenho, mas é um pouco falho, pois também inclui a seleção de elementos como parte do desempenho, que não é o que está sendo testado aqui. Aqui está um teste de desempenho atualizado:

http://jsperf.com/check-if-div-exists/3

Minha primeira execução do teste mostra que a recuperação de propriedades é mais rápida que a recuperação de índice, embora o IMO seja bastante insignificante. Eu ainda prefiro usar o comprimento, pois faz mais sentido quanto à intenção do código, em vez de uma condição mais concisa.


3
De acordo com o link que você forneceu à ferramenta em jsperf.com, .lengthatualmente oferece o melhor desempenho médio.
gmeben

Servidores minhas necessidades com o menor impacto de desempenho para uma verificação.
21816 David O'Regan

77

Sem jQuery:

O JavaScript nativo sempre será mais rápido. Nesse caso: (exemplo)

if (document.querySelector('.mydivclass') !== null) {
    // .. it exists
}

Se você deseja verificar se um elemento pai contém outro elemento com uma classe específica, você pode usar um dos seguintes. (exemplo)

var parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
    // .. it exists as a child
}

Como alternativa, você pode usar o .contains()método no elemento pai. (exemplo)

var parent = document.querySelector('.parent'),
    child = document.querySelector('.child');

if (parent.contains(child)) {
    // .. it exists as a child
}

..e finalmente, se você quiser verificar se um determinado elemento contém apenas uma determinada classe, use:

if (el.classList.contains(className)) {
    // .. el contains the class
}

57
$('div').hasClass('mydivclass')// Returns true if the class exist.

3
É verdade que essa é uma alternativa, mas cara. Será mais lento que a abordagem usada nas respostas anteriores ( marcadamente mais lenta, em alguns navegadores) e também terá um impacto na memória muito maior (o jQuery precisa criar uma matriz de todos os divelementos da página e, em seguida, voltar e faça um loop neles para ver se eles têm essa classe, tudo para jogar fora a matriz no final).
TJ Crowder

3
@tj hasClassé 33% mais rápido que os outros seletores aqui. Verifique jsperf.com/hasclass00
Hussein

1
@Hussein: Somente com um caso de teste completamente irreal (dois divelementos) que contorna a questão que destaquei (a construção da matriz). Experimente com várias divs: jsperf.com/hasclass00/2 É 63% mais lento na minha cópia do Chrome, 43% mais lento na minha cópia do Firefox, 98% (!) Mais lento no Opera. Além disso, faz sentido que seja mais lento criar uma lista de divs e pesquisá-la, em vez de fornecer ao mecanismo seletor todas as informações necessárias.
TJ Crowder

1
@Hussein: Note que eu fui muito imparcial e apresentei contra-evidência equilibrada às suas reivindicações. Sinto muito se toquei um nervo, que pareceu acontecer da última vez também. Apenas relaxe, não é uma afronta pessoal, é uma discussão técnica. Uma pele espessa e uma mente aberta são úteis no StackOverflow.
TJ Crowder

1
@Hussein: O seletor de CSS5 HTML5 significa que essa quase sempre será a pior maneira possível de fazer isso. -1 por não simplesmente excluir sua postagem.
27611 Stefan Kendall

46

Aqui está uma solução sem usar o Jquery

var hasClass = element.classList.contains('class name to search');
// hasClass is boolean
if(hasClass === true)
{
     // Class exists
}

link de referência


1
O classList é suportado apenas no IE10 +: caniuse.com/classlist . Você deve adicionar um polyfill github.com/eligrey/classList.js ou escrever seus próprios métodos
AFD


10

Para testar divelementos explicitamente:

if( $('div.mydivclass').length ){...}


Isso pode ser um pouco mais lento do que .mydivclassdependendo do navegador e da versão do jQuery.
Stefan Kendall

É verdade, mas o OP disse especificamente "jQuery - verifique se existe div com determinado nome de classe " (ênfase minha), para que você receba meu voto por ser o primeiro a incluir realmente a divparte do seletor.
TJ Crowder

7

O código simples é dado abaixo:

if ($('.mydivclass').length > 0) {
   //Things to do if class exist
}

Para ocultar a div com o ID do participante:

if ($('#'+given_id+'.mydivclass').length > 0) {
   //Things to do if class exist
}

3

Aqui estão algumas maneiras:

1.  if($("div").hasClass("mydivclass")){
    //Your code

    //It returns true if any div has 'mydivclass' name. It is a based on the class name
    }

2. if($("#myid1").hasClass("mydivclass")){
    //Your code


    //  It returns true if specific div(myid1) has this class "mydivclass" name. 
    //  It is a  based on the specific div id's.
    }           
3. if($("div[class='mydivclass']").length > 0){
    //Your code

   // It returns all the divs whose class name is "mydivclass"
   //  and it's length would be greater than one.
    }

Podemos usar qualquer uma das maneiras definidas acima com base no requisito.


2
if ($(".mydivclass").size()){
   // code here
}

O size()método apenas retorna o número de elementos que o seletor jQuery seleciona - nesse caso, o número de elementos com a classe mydivclass. Se retornar 0, a expressão será falsa e, portanto, não haverá, e se retornar qualquer outro número, as divs deverão existir.


1
Por que chamar um método quando existe a lengthpropriedade? Além disso, isso verifica qualquer elemento com essa classe, não apenas a div. (Agora, pode ser o que o OP quis dizer, mesmo que não o que ele disse.) Veja a resposta de Stefan Kendall, que faz o que o OP realmente disse (embora, novamente, eles possam ter significado o que você fez).
TJ Crowder

1
@TJ Crowder: Bem, gosto pessoal - sinto que o método size () existe - por que não usá-lo? A sobrecarga extra na chamada de uma função (a menos que você esteja fazendo isso 1000 vezes em um loop) é tão mínima que eu prefiro ter um pouco de clareza no código. Em seu segundo ponto - sim, mudei minha resposta original para remover a divpeça, por dois motivos: 1) o seletor não está limitado ao fato de que o OP usa um divelemento (pode ser alterado no futuro) e 2) em Na maioria dos navegadores e versões do jQuery, AFAIK, isso deve ser mais rápido.
Herman Schaaf

"Eu apenas sinto que o método size () está lá - por que não usá-lo" Hum, ok. A lengthpropriedade está lá, por que não usá-la? Mas se é sua preferência, é justo. Por outro lado, eu não sabia que você tinha editado. Se eu fosse fazer isso, eu o deixaria (novamente, ele disse especificamente "... se div com ..." (minha ênfase) e depois mencionou adicionalmente que, se não importasse se era um divou não, você poderia abandonar essa parte, mas tanto faz. :-)
TJ Crowder

@TJ Crowder: Sim, acho que estamos pensando demais nisso.
Herman Schaaf

@TJ Crowder: Mas em minha defesa, embora este não seja o lugar para a discussão: eu sinto que o size()método existe para deixar claro que você está contando o número de elementos em um seletor jQuery, e não apenas em qualquer array antigo. Mas, novamente, essa é apenas a minha preferência.
Herman Schaaf

2

verifique se a div existe com uma determinada classe

if ($(".mydivclass").length > 0) //it exists 
{

}

2
if($(".myClass")[0] != undefined){
  // it exists
}else{
  // does not exist
}

2
Parece quase idêntico a esta resposta existente .
Pang

Sim, sim ... mas tentei essa resposta e não funcionou. Quando adicionei a comparação a "indefinido", parecia funcionar perfeitamente.
stairie

2
var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}

Embora esse código possa responder à pergunta, fornecer um contexto adicional a respeito de por que e / ou como esse código responde à pergunta melhora seu valor a longo prazo.
Vishal Chhodwani

2

No Jquery você pode usar assim.

if ($(".className")[0]){

   // Do something if class exists

} else {

// Do something if class does not exist

}

Com JavaScript

if (document.getElementsByClassName("className").length > 0) {

// Do something if class exists

}else{

    // Do something if class does not exist

}

2

Aqui está uma solução de exemplo para a classe check (hasClass) em Javascript:

const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
   // do something if 'hasClass' is exist.
}

1

A melhor maneira em Javascript:

if (document.getElementsByClassName("search-box").length > 0) {
// do something
}

1

if ($ ("# myid1"). hasClass ("mydivclass")) {// Faça alguma coisa}


Por favor, dê uma explicação para sua resposta
executável

0

Use isso para pesquisar página inteira

if($('*').hasClass('mydivclass')){
// Do Stuff
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.