JQuery .hasClass dla wielu wartości w instrukcji if

Question 1

Mam proste stwierdzenie if jako takie:

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

// do stuff 

}

Działa to zgodnie z oczekiwaniami. Chciałbym jednak dodać więcej klas do tagu, if statementaby sprawdzić, czy którakolwiek z klas jest obecna w <html>tagu. Potrzebuję tego, więc to nie wszystkie, ale obecność co najmniej jednej klasy, ale może być więcej.

Mój przypadek użycia jest, że mam zajęcia (np m320, m768) dodanego do różnych szerokościach rzutni więc chcę tylko, aby wykonać pewną Jquery jeśli jest to specyficzna szerokość (klasa).

Oto, czego próbowałem do tej pory:

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 

    }

Jednak żaden z nich nie działa. Nie jestem pewien, co robię źle, ale najprawdopodobniej moja składnia lub struktura.

Question 2

W drugiej próbie masz pomieszane nawiasy.

var $html = $("html");

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

  // do stuff 

}

Question 3

Możesz użyć is()zamiast hasClass():

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

Question 4

Dla zabawy napisałem małą dodatkową metodę jQuery, która sprawdzi jedną z wielu nazw klas:

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

Następnie w swoim przykładzie możesz użyć tego:

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

// do stuff 

}

Możesz przekazać dowolną liczbę nazw klas.

Oto ulepszona wersja, która umożliwia również przekazywanie wielu nazw klas oddzielonych spacją:

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

Działające demo: http://jsfiddle.net/jfriend00/uvtSA/

Question 5

Może to być inne rozwiązanie:

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

według jsperf.com jest też dość szybki.

Question 6

Dla każdego, kto zastanawia się nad niektórymi różnymi aspektami wydajności ze wszystkimi tymi różnymi opcjami, utworzyłem tutaj przypadek jsperf : jsperf

Krótko mówiąc, używanie element.hasClass('class') jest najszybsze.

Następny najlepszy zakład to użycie elem.hasClass('classA') || elem.hasClass('classB') . Uwaga na ten temat: porządek ma znaczenie! Jeśli istnieje większe prawdopodobieństwo znalezienia klasy „classA”, wymień ją najpierw! Instrukcje warunku OR są zwracane, gdy tylko jeden z nich zostanie spełniony.

Zdecydowanie najgorsza wydajność element.is('.class') .

W jsperf znajduje się również funkcja CyberMonk i rozwiązanie Kolji .

Question 7

Oto niewielka odmiana odpowiedzi oferowanej przez 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;
}

Pozwala na użycie tej samej składni co .addClass () i .removeClass (). np. .hasAnyClass('m320 m768') oczywiście wymaga kuloodporności, ponieważ zakłada co najmniej jeden argument.

Question 8

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

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

Question 9

Metoda hasClass przyjmie tablicę nazw klas jako argument, możesz zrobić coś takiego:

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

Question 10

Dzieje się tak na wypadek, gdybyś potrzebował obu klas. Dla logiki albo albo po prostu użyj ||

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

W razie potrzeby możesz zoptymalizować

Question 11

Spróbuj tego:

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

// do stuff 

}

Answer 1

Mam proste stwierdzenie if jako takie:

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

// do stuff 

}

Działa to zgodnie z oczekiwaniami. Chciałbym jednak dodać więcej klas do tagu, if statementaby sprawdzić, czy którakolwiek z klas jest obecna w <html>tagu. Potrzebuję tego, więc to nie wszystkie, ale obecność co najmniej jednej klasy, ale może być więcej.

Mój przypadek użycia jest, że mam zajęcia (np m320, m768) dodanego do różnych szerokościach rzutni więc chcę tylko, aby wykonać pewną Jquery jeśli jest to specyficzna szerokość (klasa).

Oto, czego próbowałem do tej pory:

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 

    }

Jednak żaden z nich nie działa. Nie jestem pewien, co robię źle, ale najprawdopodobniej moja składnia lub struktura.

Answer 2

1

Zamiast zgadywać, jak działa API, powinieneś przeczytać dokumentację. api.jquery.com/hasclass Ponadto konsola programisty powinna być pod ręką / otwarta podczas programowania .

klify szaleństwa

Answer 3

możliwy duplikat jQuery hasClass () - sprawdź więcej niż jedną klasę

Stephan Weinhold

Answer 4

74

W drugiej próbie masz pomieszane nawiasy.

var $html = $("html");

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

  // do stuff 

}

James Montagne
źródło

6

Naprawdę powinieneś buforować $('html')zmienną, zamiast szukać jej wielokrotnie.

epascarello

1

@epascarello To prawda, aktualizuję odpowiedź dla potomnych.

James Montagne

Answer 5

6

Naprawdę powinieneś buforować $('html')zmienną, zamiast szukać jej wielokrotnie.

epascarello

Answer 6

1

@epascarello To prawda, aktualizuję odpowiedź dla potomnych.

James Montagne

Answer 7

163

Możesz użyć is()zamiast hasClass():

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

elclanrs
źródło

3

Tak hasClass()jest prawdopodobnie szybsze, ale is()jest o wiele wygodniejsze w większości przypadków

elclanrs

1

BTW tutaj możemy zobaczyć testy wydajności dla is()ihasClass()

Jignesh Gohel

1

Jest więc dużo wolniejszy, ale ogólnie bardzo szybki. Jeśli skanowanych jest tylko kilka elementów, wydaje się, że nie jest to wielka sprawa dla znacznie czystszego kodu.

jerclarke

Answer 8

3

Tak hasClass()jest prawdopodobnie szybsze, ale is()jest o wiele wygodniejsze w większości przypadków

elclanrs

Answer 9

1

BTW tutaj możemy zobaczyć testy wydajności dla is()ihasClass()

Jignesh Gohel

Answer 10

1

Jest więc dużo wolniejszy, ale ogólnie bardzo szybki. Jeśli skanowanych jest tylko kilka elementów, wydaje się, że nie jest to wielka sprawa dla znacznie czystszego kodu.

jerclarke

Answer 11

Dla zabawy napisałem małą dodatkową metodę jQuery, która sprawdzi jedną z wielu nazw klas:

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

Następnie w swoim przykładzie możesz użyć tego:

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

// do stuff 

}

Możesz przekazać dowolną liczbę nazw klas.

Oto ulepszona wersja, która umożliwia również przekazywanie wielu nazw klas oddzielonych spacją:

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

Działające demo: http://jsfiddle.net/jfriend00/uvtSA/

Answer 12

Świetnie, to działa dobrze ... także w różnych przeglądarkach! Testowane na FF i IE.

crmpicco,

Answer 13

Zrobiłem niewielką modyfikację, aby była zgodna z konwencjami jQuery dla .addClass i .removeClass (). ( stackoverflow.com/a/14887517/170456 )

CyberMonk,

Answer 14

25

Może to być inne rozwiązanie:

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

według jsperf.com jest też dość szybki.

Kolja
źródło

Bardzo ładnie, dużo szybciej!

Filip

9

Będzie to również pasowało do klasy „ZZZm320WWW” i tym podobnych. Spróbuj ... match (/ \ b (m320 | m768) \ b /), gdzie \ b to początek i koniec słowa.

Juan Lanus

tylko po to, aby kontynuować (7 lat później :)). Działa to świetnie, ale jeśli zdefiniowany przez Ciebie element html nie ma żadnych klas - wyskoczy błąd „Nie można odczytać właściwości” dopasuj ”niezdefiniowane”. W takim przypadku sprawdź, czy element ma nawet atrybut „class” (lub sprawdź, czy atrybut „class” nie jest pusty).

Sanya

Answer 15

Bardzo ładnie, dużo szybciej!

Filip

Answer 16

9

Będzie to również pasowało do klasy „ZZZm320WWW” i tym podobnych. Spróbuj ... match (/ \ b (m320 | m768) \ b /), gdzie \ b to początek i koniec słowa.

Juan Lanus

Answer 17

tylko po to, aby kontynuować (7 lat później :)). Działa to świetnie, ale jeśli zdefiniowany przez Ciebie element html nie ma żadnych klas - wyskoczy błąd „Nie można odczytać właściwości” dopasuj ”niezdefiniowane”. W takim przypadku sprawdź, czy element ma nawet atrybut „class” (lub sprawdź, czy atrybut „class” nie jest pusty).

Sanya

Answer 18

Dla każdego, kto zastanawia się nad niektórymi różnymi aspektami wydajności ze wszystkimi tymi różnymi opcjami, utworzyłem tutaj przypadek jsperf : jsperf

Krótko mówiąc, używanie element.hasClass('class') jest najszybsze.

Następny najlepszy zakład to użycie elem.hasClass('classA') || elem.hasClass('classB') . Uwaga na ten temat: porządek ma znaczenie! Jeśli istnieje większe prawdopodobieństwo znalezienia klasy „classA”, wymień ją najpierw! Instrukcje warunku OR są zwracane, gdy tylko jeden z nich zostanie spełniony.

Zdecydowanie najgorsza wydajność element.is('.class') .

W jsperf znajduje się również funkcja CyberMonk i rozwiązanie Kolji .

Answer 19

Naprawdę interesujące! Nie miałem pojęcia o jsperf. Dziękuję za zilustrowanie wszystkich różnych odmian.

Danny Englander

Answer 20

Oto niewielka odmiana odpowiedzi oferowanej przez 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;
}

Pozwala na użycie tej samej składni co .addClass () i .removeClass (). np. .hasAnyClass('m320 m768') oczywiście wymaga kuloodporności, ponieważ zakłada co najmniej jeden argument.

Answer 21

0

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

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

adeneo
źródło

1

Jeśli masz zamiar to zrobić, po co w ogóle zawracać sobie głowę korzystaniem z jquery, aby uzyskać element?

James Montagne

Cóż, nie zrobiłbym tego, ale przynajmniej dostaje zajęcia tylko raz? Po prostu wydawało się to nudne bez odrobiny jQuery, więc zastąpiłem getElementsByTagName odrobiną magii jQ specjalnie dla Ciebie!

adeneo

Answer 22

1

Jeśli masz zamiar to zrobić, po co w ogóle zawracać sobie głowę korzystaniem z jquery, aby uzyskać element?

James Montagne

Answer 23

Cóż, nie zrobiłbym tego, ale przynajmniej dostaje zajęcia tylko raz? Po prostu wydawało się to nudne bez odrobiny jQuery, więc zastąpiłem getElementsByTagName odrobiną magii jQ specjalnie dla Ciebie!

adeneo

Answer 24

Metoda hasClass przyjmie tablicę nazw klas jako argument, możesz zrobić coś takiego:

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

Answer 25

0

Dzieje się tak na wypadek, gdybyś potrzebował obu klas. Dla logiki albo albo po prostu użyj ||

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

W razie potrzeby możesz zoptymalizować

qwerty_igor
źródło

1

To jest źle. Pierwszy przykład, który podałeś, działa tylko dlatego, że metoda ma słabe oczyszczanie danych wejściowych i uważa, że cały ciąg jest nazwą klasy. Nie działa, jeśli zajęcia są w innej kolejności lub nie znajdują się obok siebie. Zobacz przykład: jsfiddle.net/0d57ekty

MightyPork

@MightyPork dzięki za sprawdzenie. masz rację, powinno być używane tylko w klasie

qwerty_igor

Answer 26

1

To jest źle. Pierwszy przykład, który podałeś, działa tylko dlatego, że metoda ma słabe oczyszczanie danych wejściowych i uważa, że cały ciąg jest nazwą klasy. Nie działa, jeśli zajęcia są w innej kolejności lub nie znajdują się obok siebie. Zobacz przykład: jsfiddle.net/0d57ekty

MightyPork

Answer 27

@MightyPork dzięki za sprawdzenie. masz rację, powinno być używane tylko w klasie

qwerty_igor

Answer 28

-1

Spróbuj tego:

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

// do stuff 

}

Robert Łoziński
źródło

Witamy w Stack Overflow! Proszę dodać wyjaśnienie, dlaczego ten kod pomaga OP. Pomoże to znaleźć odpowiedź, z której przyszli widzowie będą mogli się czegoś nauczyć. Aby uzyskać więcej informacji, zobacz Jak odpowiedzieć .

Heretic Monkey

Answer 29

Witamy w Stack Overflow! Proszę dodać wyjaśnienie, dlaczego ten kod pomaga OP. Pomoże to znaleźć odpowiedź, z której przyszli widzowie będą mogli się czegoś nauczyć. Aby uzyskać więcej informacji, zobacz Jak odpowiedzieć .

Heretic Monkey

JQuery .hasClass dla wielu wartości w instrukcji if

Odpowiedzi: