Soru JQuery için bir "var" işlevi var mı?


JQuery'de bir öğenin varlığını nasıl kontrol edebilirim?

Sahip olduğum geçerli kod şu:

if ($(selector).length > 0) {
    // Do something
}

Buna yaklaşmanın daha zarif bir yolu var mı? Belki bir eklenti veya bir işlev?


2330
2017-08-27 19:49


Menşei




Cevaplar:


JavaScript'te, her şey 'doğruluk' ya da 'felç' ve rakamlar içindir. 0 (ve NaN) anlamına gelir false, diğer her Şey true. Yani sen yazabilirsin:

if ($(selector).length)

Buna ihtiyacın yok >0 Bölüm.


2072
2018-02-25 19:16



Eğer öğe yoksa Id seçicisini kullanırsanız bu hata atar. Yaptığım çeşitli testleri ... cevaplarıma - abhirathore2006
@ abhirathore2006 Bir kimlik seçici kullanırsanız ve öğe yoksa, uzunluk 0'dır ve istisnalar atmaz. - Robert
Yeterince ilginç NaN != false. - Robert
@Robert ve [] + [] = ""ahh javascript'i seviyorum - James
@deblocker heres bir video Bence beğeneceksin! - James


Evet!

jQuery.fn.exists = function(){ return this.length > 0; }

if ($(selector).exists()) {
    // Do something
}

Bu yanıt olarak: Jeff Atwood ile Herding Code podcast


1247
2017-08-27 19:50



Sadece yazarım: eğer ($ (selector) .length) {...} '0' olmadan - vsync
Sizin $.fn.exists örnek, bir özellik araması (ucuz!) yerine, çok daha pahalı olan iki işlev çağrısı ile değiştirilir ve bu işlev çağrılarından biri, zaten sahip olduğunuz bir jQuery nesnesini yeniden oluşturur, bu da sadece aptalcadır. - C Snover
@redsquare: Kod okunabilirliği, jQuery'de bu tür bir işlevin eklenmesinin en iyi yoludur. Denilen bir şey olması .exists temiz okur, oysa .length Anlamsal bir sonuçla çakışsa bile, semantik olarak farklı bir şey olarak okur. - Ben Zotto
@quixoto, üzgünüm ama .length sarma gerektirmeyen birçok dilde bir standarttır. Sen başka nasıl yorumluyorsun? - redsquare
Benim düşünceme göre, "sıfırdan büyük bir liste uzunluğu" kavramından "varolan bir seçici yazdığım eleman (lar)" kavramına en az bir mantıksal dolaylılık. Evet, teknik olarak aynı şeydir, ama kavramsal soyutlama farklı bir seviyededir. Bu, bazı kişilerin performans performansında bile daha açık bir göstergeyi tercih etmelerine neden olur. - Ben Zotto


Eğer kullandıysanız

jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }

Zincirlemenin mümkün olmadığında mümkün olduğunu ima edersiniz.

Bu daha iyi olurdu:

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

Alternatif olarak, SSS'den:

if ( $('#myDiv').length ) { /* Do something */ }

Aşağıdakileri de kullanabilirsiniz. JQuery nesne dizisinde hiç değer yoksa dizideki ilk öğenin tanımlanması tanımsız olarak döndürülür.

if ( $('#myDiv')[0] ) { /* Do something */ }

324
2018-01-14 19:46



İlk yöntem daha iyi okur. $ ("a"). Var (), "eğer <a> öğeleri varsa" olarak okur. $ .exists ("a"), "<a> unsurları varsa" şeklinde okur. - strager
doğru ama yine de, zincirlemenin mümkün olduğunu ima ediyorsun ve eğer $ (selector) .exists (). css ("color", "red") gibi bir şey yapmaya çalışırsam işe yaramazdım ve sonra * ( - Jon Erickson
Zaten attr ve veri işlevleri gibi zincirlenemeyen yöntemler var. Ama ben senin noktanı görüyorum, ve değerin için, sadece> 0 uzunluğunu test ediyorum. - Matthew Crumley
Neden bu dünyada zincirlemeniz gerekir? $(".missing").css("color", "red") zaten doğru olanı yapar… (yani hiçbir şey) - Ben Blank
Zincirleme ile ilgili şeyler tam tosh - var bol jQuery'nin $.fn Yeni jQuery nesnesi dışında bir şey döndüren ve bu nedenle zincirleme yapmayan yöntemler. - Alnitak


Bunu kullanabilirsiniz:

// if element exists
if($('selector').length){ /* do something */ }

// if element does not exist
if(!$('selector').length){ /* do something */ }

98
2018-04-03 12:17



Tim Büthe'nin bunu zaten vermiş olduğunu görmedin mi? Cevap 2 yıl önce mi? - Th4t Guy
Pfft, Tim, elemanın mevcut olup olmadığını nasıl test edeceğini asla göstermedi. - Jeremy W
Hayat "başka" demek istiyorsun? Benim Q'm şuydu: err, var olmalı ya da seçici uymuyor. Uzunluk gereksizdir. - RichieHH
Bu cevap ve yorumlar, stackoverflow'un nasıl çalıştığını özetliyor - aswzen


Varlığı kontrol etmenin en hızlı ve en semantik kendini açıklayan yolu aslında düz JavaScript’i kullanmaktır:

if (document.getElementById('element_id')) {
    // Do something
}

JQuery uzunluk alternatifinden yazmak biraz daha uzun, ancak yerel bir JS yöntemi olduğundan daha hızlı yürütür.

Ve kendi jQuery işlevinizi yazmanın alternatifinden daha iyidir. Bu alternatif daha yavaştır, çünkü @snover belirtilen nedenlerden dolayı. Ancak, diğer programcılara varolan () işlevinin jQuery'ye özgü bir şey olduğu izlenimini verir. JavaScript, bilgi borcunu yükseltmeksizin kodunuzu düzenleyen başkaları tarafından anlaşılacak / anlaşılmalıdır.

Not: element_id'den önce bir '#' eksikliğine dikkat edin (çünkü bu düz JS, jQuery değil).


73
2018-01-11 12:27



Tamamen aynı şey değil. JQuery seçiciler herhangi bir CSS kuralı için kullanılabilir - örneğin $('#foo a.special'). Ve birden fazla elemente dönebilir. getElementById buna yaklaşmaya başlayamaz. - kikito
Doğru olarak, seçmen olarak geniş ölçüde geçerli değilsiniz. Bununla birlikte, en yaygın durumda işi oldukça iyi yapar (tek bir elemanın var olup olmadığını kontrol etmek). Kendi kendini açıklama ve hız argümanları hala duruyor. - Magne
@Noz if(document.querySelector("#foo a.special")) çalışırdı. Hayır jQuery gerekli. - Blue Skies
JS motorlarındaki hız argümanı, jQuery olmadan çalışamayan insanların zihninde ölüdür, çünkü kazanamayacakları bir argümandır. - Blue Skies
Document.getElementById'nin sahip olduğumuz eski güzel günleri hatırlıyor musunuz? Ve her zaman belgeyi unuttum. ve neden işe yaramadığını anlayamadım. Ve ben her zaman yanlış yazdım ve karakter muhafazasını yanlış anladım. - JustJohn


Yazarak birkaç byte kaydedebilirsiniz:

if ($(selector)[0]) { ... }

Bu, her jQuery nesnesi aynı zamanda bir dizi olarak da maskelenir çünkü çalışır, bu yüzden ilk öğeyi almak için diziyi kaldıran operatörünü kullanabiliriz. dizi. Döner undefined Belirtilen endekste öğe yoksa.


53
2018-01-18 09:04



Bu kesin cevabı göndermek için buraya geldim ... zorunlu keman: jsfiddle.net/jasonwilczak/ekjj80gy/2 - JasonWilczak
@JasonWilczak Neden olmasina dikkat etmek ister misiniz: .eq [0] veya .first () tür döküm yerine bulunan ilk elemente başvurmak için? - Jean Paul A.K.A el_vete
Yok hayır, jQuery.first() veya jQuery.eq(0) her ikisi de nesneleri döndürür, nesneler boş olsa bile gerçektir. Bu örnek, bu işlevlerin neden şu şekilde kullanılamayacağını göstermelidir: if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists") - Salman A
Doğru. .eq(0) 1 veya 0 uzunluğuna kesilmiş başka bir jQuery nesnesi döndürür. .first() sadece bir kolaylık .eq(0). Fakat .get(0) ilk DOM öğesini döndürür veya undefined ve aynı [0]. Bir jQuery nesnesindeki ilk DOM öğesi, ad ile normal nesne özelliğinde depolanır. '0'. Bu basit bir mülk erişimi. Tek tip döküm, sayının örtülü dönüşümünden kaynaklanır 0 dize '0'. Eğer tip dökümü bir problem ise kullanabilirsiniz $.find(selector)['0'] yerine. - Robert


Kullanabilirsiniz:

if ($(selector).is('*')) {
  // Do something
}

bir küçük belki daha zarif.


50
2017-09-17 17:53



Bu çok basit bir şey için çok fazla. Tim Büthe yanıtına bakın - vsync
Bu doğru cevap. 'Uzunluk' yöntemi, herhangi bir sayı ile yanlış pozitiflik vermesi sorununa sahiptir, örneğin: $ (666) .length // 1 döndürür, ancak geçerli bir seçici değildir - earnaz
Bu çok basit bir görev için son derece pahalıdır. Sadece .is () ve bu basit soruyu cevaplamak için ne kadar kodun işlenmesi gerektiğini görecek olursanız jQuery uygulamasına bakın. Ayrıca tam olarak ne yapmak istediğinizi de belli değil, bu yüzden aynı ya da belki de daha az zarif olan söz konusu çözüm. - micropro.cz
@earnaz harika nokta, güzel yakalama. Yine de, bunun aslında değerli bir sorun olduğunu anlamıyorum. Öğelerini tanımlayan öğeler 666 Muhtemelen kodlarının kırılmasının başka nedenleri vardır. Geçersiz bir seçici iken, $ (666) .length geçerli javascript: Doğruyu değerlendirir ve bu nedenle meli koşulu yerine getir. - Todd
Bu özel durumdan kaçınmak için @earnaz, $.find(666).length Eserleri. - Emile Bergeron


Bu eklenti bir if ifade gibi if ($(ele).exist()) { /* DO WORK */ } veya bir geri arama kullanarak.

Eklenti

;;(function($) {
    if (!$.exist) {
        $.extend({
            exist: function() {
                var ele, cbmExist, cbmNotExist;
                if (arguments.length) {
                    for (x in arguments) {
                        switch (typeof arguments[x]) {
                            case 'function':
                                if (typeof cbmExist == "undefined") cbmExist = arguments[x];
                                else cbmNotExist = arguments[x];
                                break;
                            case 'object':
                                if (arguments[x] instanceof jQuery) ele = arguments[x];
                                else {
                                    var obj = arguments[x];
                                    for (y in obj) {
                                        if (typeof obj[y] == 'function') {
                                            if (typeof cbmExist == "undefined") cbmExist = obj[y];
                                            else cbmNotExist = obj[y];
                                        }
                                        if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y];
                                        if (typeof obj[y] == 'string') ele = $(obj[y]);
                                    }
                                }
                                break;
                            case 'string':
                                ele = $(arguments[x]);
                                break;
                        }
                    }
                }

                if (typeof cbmExist == 'function') {
                    var exist =  ele.length > 0 ? true : false;
                    if (exist) {
                        return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); });
                    }
                    else if (typeof cbmNotExist == 'function') {
                        cbmNotExist.apply(ele, [exist, ele]);
                        return ele;
                    }
                    else {
                        if (ele.length <= 1) return ele.length > 0 ? true : false;
                        else return ele.length;
                    }
                }
                else {
                    if (ele.length <= 1) return ele.length > 0 ? true : false;
                    else return ele.length;
                }

                return false;
            }
        });
        $.fn.extend({
            exist: function() {
                var args = [$(this)];
                if (arguments.length) for (x in arguments) args.push(arguments[x]);
                return $.exist.apply($, args);
            }
        });
    }
})(jQuery);

jsFiddle

Bir veya iki geri arama belirtebilirsiniz. Eğer eleman varsa, birincisi ateşlenir, ikincisi eğer eleman yaparsa değil var olmak. Bununla birlikte, yalnızca bir işlevi geçmeyi seçerseniz, yalnızca öğe mevcut olduğunda tetiklenir. Böylece, seçilen elemanın yapması durumunda zincir ölecektir. değil var olmak. Tabii ki, eğer mevcutsa, ilk işlev patlayacaktır ve zincir devam edecektir.

Kullanmanın geri arama varyantı, zincirlenebilirliği korumaya yardımcı olur - öğe döndürülür ve diğer jQuery yöntemlerinde olduğu gibi komutları zincirlemeye devam edebilirsiniz!

Örnek kullanımlar

if ($.exist('#eleID')) {    /*    DO WORK    */ }        //    param as STRING
if ($.exist($('#eleID'))) { /*    DO WORK    */ }        //    param as jQuery OBJECT
if ($('#eleID').exist()) {  /*    DO WORK    */ }        //    enduced on jQuery OBJECT

$.exist('#eleID', function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
}, function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element DOES NOT EXIST    */
})

$('#eleID').exist(function() {            //    enduced on jQuery OBJECT with CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
})

$.exist({                        //    param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD
    element: '#eleID',
    callback: function() {
        /*    DO WORK    */
        /*    This will ONLY fire if the element EXIST    */
    }
})

48
2017-11-14 14:20



Geri arama sürümünde, Has Items Geri arama aslında bir argüman olarak nesneyi geçirir? - Chris Marisic


JQuery'ye gerçekten gerek yok. Düz JavaScript ile kontrol etmek daha kolay ve semantik olarak doğrudur:

if(document.getElementById("myElement")) {
    //Do something...
}

Herhangi bir nedenle öğeye bir kimlik koymak istemiyorsanız, DOM'a erişmek için tasarlanmış başka bir JavaScript yöntemini kullanabilirsiniz.

jQuery gerçekten harika, ama saf JavaScript'in unutulmaması için ...


44
2018-05-20 09:21



Biliyorum: doğrudan orijinal soruyu (jQuery işlevini sorar) yanıtlamaz, ama bu durumda cevap “Hayır” veya “semantik olarak doğru bir çözüm” değildir. - amypellegrini


Buradaki cevapların çoğunun olması gerektiği gibi doğru olmadığını görüyorum, eleman uzunluğunu kontrol ediyorlar, pek çok durumda iyi olabilir, ancak% 100 değil, bunun yerine işleve bir sayı geçtiğini hayal et, bu yüzden herşeyi kontrol eden bir işlevi prototip olarak yapıyorum koşulları ve olması gerektiği gibi cevap verin:

$.fn.exists = $.fn.exists || function() { 
  return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); 
}

Bu uzunluk ve tür hem de kontrol edecek, Şimdi bu şekilde kontrol edebilirsiniz:

$(1980).exists(); //return false
$([1,2,3]).exists(); //return false
$({name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); //return false
$([{nodeName: 'foo'}]).exists() // returns false
$('div').exists(); //return true
$('.header').exists(); //return true
$(document).exists(); //return true
$('body').exists(); //return true

40
2018-06-01 07:20





Bunu kullanabilirsin:

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something*/}

38
2017-08-11 23:42