Bir if ifadesindeki birden çok değer için JQuery .hasClass

81

Basit bir if ifadem var:

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

// do stuff 

}

Bu beklendiği gibi çalışıyor. Ancak, etikette if statementsınıflardan herhangi birinin mevcut olup olmadığını kontrol etmek için öğesine daha fazla sınıf eklemek istiyorum <html>. Buna ihtiyacım var, bu yüzden hepsi değil, sadece en az bir sınıfın varlığı ama daha fazlası olabilir.

Benim kullanım durumum m320, m768çeşitli görüntü alanı genişlikleri için eklenmiş sınıflarım (örneğin) olmasıdır , bu nedenle yalnızca belirli bir genişlik (sınıf) ise belirli Jquery'yi yürütmek istiyorum.

İşte şimdiye kadar denediğim şey:

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 

    }

Bunların hiçbiri işe yaramıyor gibi görünüyor. Neyi yanlış yaptığımdan emin değilim ama büyük olasılıkla sözdizimim veya yapım.

— Danny Englander
kaynak

1

Bir API'nin nasıl çalıştığını tahmin etmek yerine, dokümanları okumalısınız. api.jquery.com/hasclass Ayrıca, geliştirme sırasında geliştiricinizin konsolunu kullanışlı / açık tutmalısınız .

— delilik uçurumları

jQuery hasClass () 'ın

— Stephan Weinhold

74

2. denemenizde biraz parantez aldınız.

var $html = $("html");

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

  // do stuff 

}

— James Montagne
kaynak

6

$('html')Birden çok kez aramak yerine bir değişkeni gerçekten önbelleğe almalısınız .

— epascarello

1

@epascarello Çok doğru, gelecek nesil için cevabı güncelliyor.

— James Montagne

163

Bunun is()yerine kullanabilirsiniz hasClass():

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

— Elclanrs
kaynak

3

Evet hasClass()muhtemelen daha hızlıdır, ancak is()çoğu zaman çok daha kullanışlıdır

— elclanrs

1

BTW buradais() ve için performans testlerini görebilirizhasClass()

— Jignesh Gohel

1

Yani çok daha yavaş ama genel olarak süper hızlı. Taranan yalnızca birkaç öğe varsa, çok daha temiz bir kod için çok önemli değil gibi görünüyor.

— jerclarke

28

Eğlenmek için, birden çok sınıf adından herhangi birini kontrol edecek küçük bir jQuery eklenti yöntemi yazdım:

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

Ardından, örneğinizde şunu kullanabilirsiniz:

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

// do stuff 

}

İstediğiniz kadar sınıf adı verebilirsiniz.

Bir boşlukla ayrılmış birden çok sınıf adını geçirmenize de izin veren gelişmiş bir sürümü burada bulabilirsiniz:

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

Çalışma demosu: http://jsfiddle.net/jfriend00/uvtSA/

— jfriend00
kaynak

Mükemmel, bu iyi çalışıyor ... çapraz tarayıcı da! FF ve IE'de test edilmiştir.

— crmpicco

.AddClass ve .removeClass () için jQuery kurallarına uyması için küçük bir mod yaptım. ( stackoverflow.com/a/14887517/170456 )

— CyberMonk

25

Bu başka bir çözüm olabilir:

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

jsperf.com'a göre de oldukça hızlı.

— Kolja
kaynak

Çok güzel, çok daha hızlı!

— Philip

9

Bu aynı zamanda 'ZZZm320WWW' sınıfı ve benzerleriyle eşleşecektir. Deneyin ... eşleştirin (/ \ b (m320 | m768) \ b /), burada \ b'ler kelimenin başı ve sonuyla eşleşir.

— Juan Lanus

sadece takip etmek için (7 yıl sonra :)). Bu harika çalışıyor, ancak tanımladığınız html öğesinin herhangi bir sınıfı yoksa - "Tanımlanmamış" hatanın "özelliği okunamıyor" eşleşmesini "çekecektir. Bu durumda, öğenin "sınıf" özniteliğine sahip olup olmadığını test edin (veya "sınıf" özniteliğinin boş olmadığından emin olmak için test edin).

— Sanya

5

Tüm bu farklı seçeneklerle farklı performans yönlerinden bazılarını merak eden herkes için burada bir jsperf vakası oluşturdum: jsperf

Kısacası kullanmak element.hasClass('class')en hızlısıdır.

Bir sonraki en iyi bahis kullanmaktır elem.hasClass('classA') || elem.hasClass('classB'). Bununla ilgili bir not: sipariş önemlidir! 'ClassA' sınıfının bulunma olasılığı daha yüksekse, önce listeleyin! OR koşul ifadeleri, bunlardan biri karşılanır karşılanmaz döner.

Şimdiye kadarki en kötü performans kullanıyordu element.is('.class').

Ayrıca jsperf'te listelenen CyberMonk'un işlevi ve Kolja'nın çözümüdür .

— Ryan Steffer
kaynak

Gerçekten ilginç! Jsperf hakkında hiçbir fikrim yoktu. Tüm farklı varyasyonları gösterdiğiniz için teşekkür ederiz.

— Danny Englander

3

İşte jfriend00 tarafından sunulan yanıtın küçük bir varyasyonu:

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

.AddClass () ve .removeClass () ile aynı sözdiziminin kullanılmasına izin verir. Örneğin, .hasAnyClass('m320 m768') en az bir argüman varsaydığı için elbette kurşun geçirmezliğe ihtiyaç duyar.

— CyberMonk
kaynak

0

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

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

— adeneo
kaynak

1

Eğer bunu yapacaksan, elementi elde etmek için neden jquery kullanmayı düşünesin ki?

— James Montagne

Yapmazdım, ama en azından dersleri sadece bir kez alıyor? Biraz jQuery olmadan çok sıkıcı göründü, bu yüzden getElementsByTagName'i sadece sizin için biraz jQ büyüsü ile değiştirdim!

— adeneo

0

HasClass yöntemi, bir dizi sınıf ismini bir argüman olarak kabul eder, bunun gibi bir şey yapabilirsiniz:

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

— Ron Sims II
kaynak

0

Bu, her iki sınıfa da ihtiyacınız olması durumunda. Mantık veya ikisinden biri için sadece ||

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

Gerektiği gibi optimize etmekten çekinmeyin

— qwerty_igor
kaynak

1

Bu yanlış. Verdiğiniz ilk örnek, yöntemin girdi temizliği zayıf olduğu ve tüm dizenin bir sınıf adı olduğunu düşündüğü için işe yarıyor. Sınıflar farklı bir sıradaysa veya yan yana değilse çalışmaz. Örneğe

— MightyPork

@MightyPork kontrol ettiğiniz için teşekkürler. haklısın, sadece sınıf başına kullanılmalı

— qwerty_igor

-1

Bunu dene:

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

// do stuff 

}

— Robert Łoziński
kaynak

Stack Overflow'a hoş geldiniz! Lütfen bu kodun neden OP'ye yardımcı olduğuna dair bazı açıklamalar ekleyin. Bu, gelecekteki izleyicilerin öğrenebileceği bir yanıt sağlamaya yardımcı olacaktır. Daha fazla bilgi için Nasıl Cevaplanır bölümüne bakın .

— Heretic Maymun