JQuery .hasClass per valori multipli in un'istruzione if

Ho una semplice istruzione if in quanto tale:JQuery .hasClass per valori multipli in un'istruzione if

if ($('html').hasClass('m320')) { 

// do stuff 

}

Questo funziona come previsto. Tuttavia, voglio aggiungere più classi allo if statement per verificare se alcune delle classi sono presenti nel tag <html>. Ne ho bisogno, quindi non sono tutti, ma solo la presenza di almeno una classe, ma può esserlo di più.

mio caso d'uso è che ho le classi (per esempio m320, m768) aggiunto per diverse larghezze viewport quindi ho solo voglia di eseguire certi Jquery se si tratta di una larghezza specifica (classe).

Ecco quello che ho provato finora:

if ($('html').hasClass('m320', 'm768')) { 

// do stuff 

}

if ($('html').hasClass('m320')) || ($('html').hasClass('m768')) { 

// do stuff 

}

if ($('html').hasClass(['m320', 'm768'])) { 

// do stuff 

    }

Nessuno di questi sembra funzionare anche se. Non sono sicuro di cosa sto facendo male, ma molto probabilmente la mia sintassi o struttura.

fonte

2012-05-11 Danny Englander

Invece di indovinare come funziona un API, si dovrebbe leggere la documentazione. http://api.jquery.com/hasclass/ Inoltre, dovresti avere la console del tuo sviluppatore a portata di mano/aperta durante lo sviluppo. –

possibile duplicato di [jQuery hasClass() - verifica più di una classe] (http://stackoverflow.com/questions/2214952/jquery-hasclass-check-for-more-than-one-class) –

Hai appena avuto alcune parentesi incasinate nel tuo secondo tentativo.

var $html = $("html"); 

if ($html.hasClass('m320') || $html.hasClass('m768')) { 

    // do stuff 

}

fonte

2012-05-11 21:57:59

Perfetto, grazie ! –

Dovresti davvero mettere in cache '$ ('html')' in una variabile invece di doverlo cercare più volte. – epascarello

@epascarello Molto vero, aggiornando la risposta per i posteri. –

122

Si potrebbe utilizzare is() invece di hasClass():

if ($('html').is('.m320, .m768')) { ... }

fonte

2012-05-11 21:58:06 elclanrs

Sì 'hasClass()' è probabilmente più veloce ma 'is()' è molto più comodo la maggior parte delle volte – elclanrs

var classes = $('html')[0].className; 

if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) { 
    //do something 
}

fonte

2012-05-11 22:06:53 adeneo

Se hai intenzione di farlo, perché preoccuparsi di usare jquery per ottenere l'elemento? –

Beh, non lo farei, ma almeno ottiene le classi una volta sola? Sembrava così noioso senza un po 'di jQuery, quindi ho sostituito getElementsByTagName con qualche magia jQ solo per te! – adeneo

Per divertimento, ho scritto un po 'di metodo add-on jQuery che verificare la presenza di uno dei nomi delle classi multiple:

$.fn.hasAnyClass = function() { 
    for (var i = 0; i < arguments.length; i++) { 
     if (this.hasClass(arguments[i])) { 
      return true; 
     } 
    } 
    return false; 
}

Quindi, nel tuo esempio, è possibile utilizzare questo:

if ($('html').hasAnyClass('m320', 'm768')) { 

// do stuff 

}

È possibile passare tutti i nomi di classe che si desidera.

Ecco una versione avanzata che consente anche di passare i nomi delle classi più separati da uno spazio:

$.fn.hasAnyClass = function() { 
    for (var i = 0; i < arguments.length; i++) { 
     var classes = arguments[i].split(" "); 
     for (var j = 0; j < classes.length; j++) { 
      if (this.hasClass(classes[j])) { 
       return true; 
      } 
     } 
    } 
    return false; 
} 

if ($('html').hasAnyClass('m320 m768')) { 
    // do stuff 
}

demo di lavoro: http://jsfiddle.net/jfriend00/uvtSA/

fonte

2012-05-11 22:11:28 jfriend00

Eccellente, funziona bene ... anche cross-browser! Testato su FF e IE. – crmpicco

Ho fatto un leggero mod per renderlo conforme alle convenzioni jQuery per .addClass e .removeClass(). (http://stackoverflow.com/a/14887517/170456) – CyberMonk

Ecco una leggera variante risposta offerta dal jfriend00:

$.fn.hasAnyClass = function() { 
    var classes = arguments[0].split(" "); 
    for (var i = 0; i < classes.length; i++) { 
     if (this.hasClass(classes[i])) { 
      return true; 
     } 
    } 
    return false; 
}

Consente l'uso della stessa sintassi di .addClass() e .removeClass(). ad esempio, .hasAnyClass('m320 m768') Richiede l'utilizzo di un sistema di protezione contro i proiettili, ovviamente, poiché presuppone almeno un argomento.

fonte

2013-02-15 02:32:24 CyberMonk

Questa può essere un'altra soluzione:

if ($('html').attr('class').match(/m320|m768/)) { 
    // do stuff 
}

in base alle jsperf.com è abbastanza veloce, troppo.

fonte

2013-05-31 13:50:30 Kolja

Molto bello, molto più veloce! – Philip

Corrisponde anche alla classe 'ZZZm320WWW' e simili. Prova ... corrisponde (/ \ b (m320 | m768) \ b /) dove i \ b corrispondono all'inizio e alla fine di una parola. –

Per chiunque chiedendo circa alcuni dei diversi aspetti delle prestazioni, con tutte queste diverse opzioni, ho creato un caso jsperf qui: jsperf

In breve, utilizzando element.hasClass('class') è il più veloce.

La prossima scommessa migliore è usare elem.hasClass('classA') || elem.hasClass('classB'). Una nota su questo: l'ordine conta! Se la classe 'classA' è più probabile che venga trovata, elencala prima! Le dichiarazioni di condizione OR vengono restituite non appena viene soddisfatta una di esse.

La peggiore performance di gran lunga è stata l'utilizzo di element.is('.class').

Anche elencato in jsperf è CyberMonk's function e Kolja's solution.

metodo

fonte

2013-11-30 00:34:53

Davvero interessante! Non avevo idea di jsperf. Grazie per aver illustrato tutte le diverse varianti. –

Il hasClass accetterà una serie di nomi di classe come argomento, si può fare qualcosa di simile:

$(document).ready(function() { 
function filterFilesList() { 
    var rows = $('.file-row'); 
    var checked = $("#filterControls :checkbox:checked"); 

    if (checked.length) { 
     var criteriaCollection = []; 

     checked.each(function() { 
      criteriaCollection.push($(this).val()); 
     }); 

     rows.each(function() { 
      var row = $(this); 
      var rowMatch = row.hasClass(criteriaCollection); 

      if (rowMatch) { 
       row.show(); 
      } else { 
       row.hide(200); 
      } 
     }); 
    } else { 
     rows.each(function() { 
      $(this).show(); 
     }); 
    } 
} 

    $("#filterControls :checkbox").click(filterFilesList); 
    filterFilesList(); 
});

fonte

2016-10-12 14:25:48

-3

Prova questo:

if ($('html').hasClass('class1 class2')) { 

// do stuff 

}

fonte

2016-10-14 11:49:51

Benvenuti in Stack Overflow! Si prega di aggiungere alcune spiegazioni sul perché questo codice aiuti l'OP.Questo aiuterà a fornire una risposta da cui i futuri spettatori potranno imparare. Vedi [risposta] per maggiori informazioni. –

Ho provato più classi in un parametro del metodo hasClass e funziona come previsto.

$('el').hasClass('first-class second-class');

Questo è il caso in cui è necessario presentare entrambe le classi. Per uno o la logica basta usare ||

$('el').hasClass('first-class') || $('el').hasClass('second-class')

Sentitevi liberi di ottimizzare in base alle esigenze

fonte

2017-11-09 17:29:03

JQuery .hasClass per valori multipli in un'istruzione if

risposta

Problemi correlati