JQuery .hasClass pentru valori multiple într-o declarație if (Programare, Javascript, Jquery, Sintaxă, Logică)

Danny Englander a intrebat.

Am o simplă declarație if ca atare:

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

// do stuff 

}

Acest lucru funcționează așa cum era de așteptat. Cu toate acestea, vreau să adaug mai multe clase la if statement pentru a verifica dacă vreuna dintre clase este prezentă în <html> tag. Am nevoie ca să nu fie vorba de toate, ci doar de prezența a cel puțin unei clase, dar pot fi mai multe.

Cazul meu de utilizare este că am clase (de ex. m320, , m768) adăugate pentru diferite lățimi de vizualizare, astfel încât vreau să execut anumite Jquery numai dacă este o anumită lățime (clasă).

Iată ce am încercat până acum:

1.

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

// do stuff 

}

2.

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

 // do stuff 

}

3.

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

 // do stuff 

    }

Niciuna dintre acestea nu pare să funcționeze totuși. Nu sunt sigur ce greșesc, dar cel mai probabil sintaxa sau structura mea.

Comentarii

  • În loc să ghicești cum funcționează un API, ar trebui să citești documentația. api.jquery.com/hasclass De asemenea, ar trebui să aveți consola dezvoltatorului la îndemână/deschis în timpul dezvoltării. –  > Por Cliffs of Insanity.
  • posibil duplicat al jQuery hasClass() – verificați dacă există mai multe clase –  > Por Stephan Weinhold.
10 răspunsuri
James Montagne

Tocmai ai avut niște paranteze încurcate în a doua ta încercare.

var $html = $("html");

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

  // do stuff 

}

Comentarii

  • Chiar ar trebui să stocați în cache $('html') într-o variabilă în loc să trebuiască să o căutați de mai multe ori. –  > Por epascarello.
  • @epascarello Foarte adevărat, actualizând răspunsul pentru posteritate. –  > Por James Montagne.
elclanrs

Ați putea folosi is() în loc de hasClass():

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

Comentarii

  • Da hasClass() este probabil mai rapid, dar is() este mult mai convenabil de cele mai multe ori –  > Por elclanrs.
  • BTW aici se pot vedea testele de performanță pentru is() și hasClass() –  > Por Jignesh Gohel.
  • Deci, este mult mai lent, dar și foarte rapid în general. Dacă sunt doar câteva elemente care sunt scanate, nu pare a fi o mare problemă pentru un cod mult mai curat. –  > Por jerclarke.
jfriend00

Pentru distracție, am scris o mică metodă de completare jQuery care va verifica oricare dintre mai multe nume de clasă:

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

Apoi, în exemplul tău, ai putea folosi acest lucru:

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

// do stuff 

}

Puteți trece cât de multe nume de clase doriți.


Iată o versiune îmbunătățită care vă permite, de asemenea, să treceți mai multe nume de clase separate de un spațiu:

$.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 
}

Demonstrație de lucru: http://jsfiddle.net/jfriend00/uvtSA/

Comentarii

  • Excelent, acest lucru funcționează bine… și între browsere! Testat pe FF și IE. –  > Por crmpicco.
  • Am făcut o mică modificare pentru a o face conformă cu convențiile jQuery pentru .addClass și .removeClass(). (stackoverflow.com/a/14887517/170456) –  > Por CyberMonk.
Kolja

Aceasta poate fi o altă soluție:

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

conform jsperf.com este și destul de rapidă.

Comentarii

  • Foarte frumos, mult mai rapid! –  > Por Philip.
  • Aceasta se va potrivi și cu clasa „ZZZm320WWWW” și altele asemenea. Încercați …match(/b(m320|m768)b/) unde b-urile corespund începutului și sfârșitului unui cuvânt. –  > Por Juan Lanus.
  • doar pentru a continua (7 ani mai târziu 🙂 ). Acest lucru funcționează foarte bine, dar dacă elementul html pe care îl definiți nu are nicio clasă – va trage o eroare de tipul ‘Cannot read property „match” of undefined’. În acest caz, testați dacă elementul are chiar atributul ‘class’ (sau testați pentru a vă asigura că atributul ‘class’ nu este nul). –  > Por Sanya.
Ryan Steffer

Pentru oricine se întreabă despre unele dintre diferitele aspecte de performanță cu toate aceste opțiuni diferite, am creat un caz jsperf aici: jsperf

Pe scurt, folosind element.hasClass('class') este cea mai rapidă.

Următorul cel mai bun pariu este utilizarea elem.hasClass('classA') || elem.hasClass('classB'). O notă în această privință: ordinea contează! Dacă clasa „classA” are mai multe șanse de a fi găsită, listați-o prima! Instrucțiunile de condiție OR se returnează imediat ce una dintre ele este îndeplinită.

Cea mai slabă performanță, de departe, a fost utilizarea element.is('.class').

De asemenea, în jsperf este listată funcția lui CyberMonk, precum și soluția lui Kolja.

Comentarii

  • Foarte interesant! Nu aveam nicio idee despre jsperf. Mulțumesc pentru ilustrarea tuturor variantelor diferite. –  > Por Danny Englander.
CyberMonk

Iată o ușoară variație a răspunsului oferit de 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;
}

Permite utilizarea aceleiași sintaxe ca și .addClass() și .removeClass(). de exemplu, .hasAnyClass('m320 m768') Necesită o protecție antiglonț, desigur, deoarece presupune cel puțin un argument.

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

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

Comentarii

  • Dacă ai de gând să faci asta, de ce să te mai obosești să folosești jquery pentru a obține elementul? –  > Por James Montagne.
  • Ei bine, eu nu aș face-o, dar cel puțin obține clasele doar o singură dată? Părea atât de plictisitor fără puțin jQuery, așa că am înlocuit getElementsByTagName cu ceva magie jQ doar pentru tine! –  > Por adeneo.
Ron Sims II

Metoda hasClass va accepta ca argument o matrice de nume de clase, puteți face ceva de genul următor:

$(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();
});

qwerty_igor

Aceasta în cazul în care aveți nevoie de prezența ambelor clase. Pentru logica „either or” folosiți doar ||

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

Nu ezitați să optimizați după cum este necesar

Comentarii

  • Acest lucru este greșit. Primul exemplu pe care l-ați dat funcționează doar pentru că metoda are o igienizare slabă a intrărilor și crede că întregul șir de caractere este un nume de clasă. Nu funcționează dacă clasele sunt într-o ordine diferită sau dacă nu sunt una lângă alta. A se vedea exemplul: jsfiddle.net/0d57ekty –  > Por MightyPork.
  • @MightyPork mulțumim pentru verificare. aveți dreptate, ar trebui să fie folosit doar pentru fiecare clasă –  > Por qwerty_igor.
Robert Łoziński

Încearcă asta:

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

// do stuff 

}

Comentarii

  • Bine ați venit la Stack Overflow! Vă rugăm să adăugați o explicație de ce acest cod îl ajută pe OP. Acest lucru va ajuta la furnizarea unui răspuns din care viitorii telespectatori pot învăța. Consultați Cum să răspundeți pentru mai multe informații. –  > Por Maimuță eretică.