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.