JQuery için “mevcut” işlevi var mı?

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

Mevcut 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?

JavaScript'te her şey 'gerçeğe uygun' veya 'sahtelik'tir ve sayılar 0(ve NaN) için falseher şey demektir true. Böylece şunu yazabilirsiniz:

if ($(selector).length)

O >0kısma ihtiyacınız yok .

Evet!

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

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

Bu yanıt: Jeff Atwood ile Herding Code podcast

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 bölümünden :

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

Aşağıdakileri de kullanabilirsiniz. JQuery nesne dizisinde hiçbir değer yoksa, dizideki ilk öğenin alınması tanımsız olarak dönecektir.

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

Bunu kullanabilirsiniz:

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

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

Varlığı kontrol etmenin en hızlı ve anlamsal olarak kendi kendini açıklayan yolu aslında sade kullanmaktır JavaScript:

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

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

Ve kendi jQueryfonksiyonunuzu yazmanın alternatifinden daha iyidir . Snover'in belirttiği nedenlerle bu alternatif daha yavaştır. Ancak diğer programcılara, exists()işlevin jQuery'nin doğasında olan bir şey olduğu izlenimini verir . JavaScriptbilgi borcu olmadan, kodunuzu düzenleyen başkaları tarafından anlaşılmalıdır.

NB: Önce '#' eksikliğine dikkat edin element_id(bu düz JS olduğu için değil jQuery).

Yazarak birkaç bayt kaydedebilirsiniz:

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

Bu çalışmalar her jQuery nesnesi de maskeli bir dizi olarak, bu yüzden ilk öğeyi almak için dizi dereferencing operatörünü kullanabilirsiniz çünkü diziden . undefinedBelirtilen dizinde hiç öğe yoksa geri döner .

Kullanabilirsiniz:

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

Bir Biraz belki daha zarif.

Bu eklenti, geri arama ifgibi if ($(ele).exist()) { /* DO WORK */ }veya kullanan bir ifadede kullanılabilir.

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. İlki eleman varsa eleman yoksa, ikinci bir ateş edeceği ateş edeceği değil mevcuttur. Ancak, yalnızca bir işlevi geçmeyi seçerseniz, yalnızca öğe mevcut olduğunda tetiklenir. Seçilen eleman durumunda Böylece, zincir ölecek değil mevcuttur. Tabii ki, varsa, ilk fonksiyon ateşlenecek ve zincir devam edecektir.

Geri arama varyantını kullanmanın zincirlenebilirliğin korunmasına yardımcı olduğunu unutmayın - eleman 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    */
    }
})

Buradaki cevapların çoğunun olması gerektiği gibi doğru olmadığını görüyorum , eleman uzunluğunu kontrol ediyorlar , birçok durumda tamam olabilirler , ancak % 100 değil , sayının işleve geçip geçmediğini hayal edin, bu yüzden hepsini kontrol eden bir işlevi prototiplendiriyorum ve cevabı olması gerektiği gibi geri gönderin:

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

Bu hem uzunluğu hem de türü kontrol edecektir, Ş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

Gerçekten jQuery gerek yok. Sade JavaScript ile aşağıdakileri kontrol etmek daha kolay ve anlamsal 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 kullanmaya devam edebilirsiniz.

jQuery gerçekten harika, ama saf JavaScript'in unutulmasına izin vermeyin ...

Bunu kullanabilirsiniz:

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

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

Önceki yanıtların hepsinin .lengthparametreyi gerektirmesinin nedeni , çoğunlukla $()perdelerin arkasında querySelectorAll olan jquery seçicisini kullanmalarıdır (veya doğrudan kullanırlar). Bu yöntem oldukça yavaştır, çünkü bu seçiciyle tüm eşleşmeleri aramak ve onlarla bir dizi doldurmak için tüm DOM ağacını ayrıştırmak gerekir.

['Length'] parametresi gerekli veya kullanışlı değildir ve document.querySelector(selector)bunun yerine doğrudan kullanırsanız kod çok daha hızlı olacaktır , çünkü eşleştiği ilk öğeyi döndürür veya bulunamazsa null olur.

function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;

Ancak bu yöntem bizi döndürülen asıl nesne ile terk eder; değişken olarak kaydedilmeyecek ve tekrar tekrar kullanılmayacaksa sorun olmaz (böylece unutursak referansı saklayın).

var myel=elementIfExists("#myid");
// now we are using a reference to the element which will linger after removal
myel.getParentNode.removeChild(myel);
console.log(elementIfExists("#myid")); /* null */
console.log(myel); /* giant table lingering around detached from document */
myel=null; /* now it can be garbage collected */

Bazı durumlarda bu istenebilir. Bunun için bir for döngüsünde kullanılabilir:

/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
    if (myel == myblacklistedel) break;

Aslında öğeye ihtiyacınız yoksa ve sadece doğru / yanlış almak / saklamak istiyorsanız, sadece iki katına değil !! Çözülmüş ayakkabılar için çalışıyor, neden burada düğümlenesiniz?

function elementExists(selector){
    return !!document.querySelector(selector);
}
/* usage: */
var hastables = elementExists("table");  /* will be true or false */
if (hastables){
    /* insert css style sheet for our pretty tables */
}
setTimeOut(function (){if (hastables && !elementExists("#mytablecss"))
                           alert("bad table layouts");},3000);

Mı $.contains()istediğini?

jQuery.contains( container, contained )

$.contains()İkinci argüman tarafından sağlanan DOM öğesi doğrudan bir çocuktur ya da daha derinden iç içe olsun, ilk argüman tarafından sağlanan DOM öğesinin soyundan ise yöntem true döndürür. Aksi takdirde, yanlış döndürür. Yalnızca öğe düğümleri desteklenir; ikinci argüman bir metin veya yorum düğümü $.contains()ise false değerini döndürür.

Not : İlk argüman bir jQuery nesnesi veya düz JavaScript nesnesi değil, bir DOM öğesi olmalıdır.

if ($(selector).length) {}Yetersiz buldum . selectorBoş bir nesne olduğunda uygulamanızı sessizce kırar {}.

var $target = $({});        
console.log($target, $target.length);

// Console output:
// -------------------------------------
// [▼ Object              ] 1
//    ► __proto__: Object

Benim tek önerim için ek bir kontrol yapmak {}.

if ($.isEmptyObject(selector) || !$(selector).length) {
    throw new Error('Unable to work with the given selector.');
}

Yine de daha iyi bir çözüm arıyorum, çünkü bu biraz ağır.

Düzenleme: UYARI! selectorBir dize olduğunda bu IE'de çalışmaz .

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE

Java komut dosyasında uzunluğu kullanarak öğenin var olup olmadığını kontrol edebilirsiniz. Uzunluk sıfırdan büyükse, eleman sıfırsa eleman mevcutsa eleman mevcut değildir

// These by Id
if ($("#elementid").length > 0) {
  // Element is Present
} else {
  // Element is not Present
}

// These by Class
if ($(".elementClass").length > 0) {
  // Element is Present
} else {
  // Element is not Present
}

Bir elemanın varlığını kontrol etmek resmi jQuery web sitesinde düzenli olarak belgelenmiştir!

Seçiciniz tarafından döndürülen jQuery koleksiyonunun .length özelliğini kullanın :

if ($("#myDiv").length) {
    $("#myDiv").show();
}

Bir öğenin var olup olmadığını test etmek her zaman gerekli değildir. Aşağıdaki kod, varsa öğeyi gösterir ve yoksa hiçbir şey yapmaz (hata olmadan):

$("#myDiv").show();

bu tüm cevaplara çok benzer, ancak neden !bir boole elde edebilmeniz için operatörü iki kez kullanmıyorsunuz :

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

if ($(selector).exists()) {
    // the element exists, now what?...
}

$(selector).length && //Do something

DOMElemanı test etmeyi deneyin

if (!!$(selector)[0]) // do stuff

Hiway'in cevabından esinlenerek aşağıdakileri buldum:

$.fn.exists = function() {
    return $.contains( document.documentElement, this[0] );
}

jQuery.contains iki DOM öğesi alır ve birincisinin ikincisini içerip içermediğini kontrol eder.

document.documentElementİlk argüman olarak kullanmak ,exists yalnızca geçerli belgedeki bir öğenin varlığını kontrol etmek için uygulamak istediğimizde yöntemin .

Aşağıda, birlikte karşılaştıran bir pasajı koyduk jQuery.exists()karşı $(sel)[0]ve $(sel).lengthhangi de dönüp yaklaşımları truthyiçin değerleri $(4)ise $(4).exists()getiriler false. DOM'de bir öğenin varlığını kontrol etme bağlamında, bu istenen sonuç gibi görünmektedir .

$.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
  var testFuncs = [
    function(jq) { return !!jq[0]; },
    function(jq) { return !!jq.length; },
    function(jq) { return jq.exists(); },
  ];
    
  var inputs = [
    ["$()",$()],
    ["$(4)",$(4)],
    ["$('#idoexist')",$('#idoexist')],
    ["$('#idontexist')",$('#idontexist')]
  ];
  
  for( var i = 0, l = inputs.length, tr, input; i < l; i++ ) {
    input = inputs[i][1];
    tr = "<tr><td>" + inputs[i][0] + "</td><td>"
          + testFuncs[0](input) + "</td><td>"
          + testFuncs[1](input) + "</td><td>"
          + testFuncs[2](input) + "</td></tr>";
    $("table").append(tr);
  }

td { border: 1px solid black }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idoexist">#idoexist</div>
<table style>
<tr>
  <td>Input</td><td>!!$(sel)[0]</td><td>!!$(sel).length</td><td>$(sel).exists()</td>
</tr>
</table>
<script>
  
  $.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
</script>

JQuery'ye gerek yok (temel çözüm)

if(document.querySelector('.a-class')) {
  // do something
}

Aşağıda çok daha fazla performans seçeneği (a-sınıftan önce nokta eksikliğine dikkat edin).

if(document.getElementsByClassName('a-class')[0]) {
  // do something
}

querySelector, jQuery'de $ () (cızırtı) gibi uygun bir eşleştirme motoru kullanır ve daha fazla bilgi işlem gücü kullanır, ancak% 99 durumda iyi olur. İkinci seçenek daha açıktır ve koda tam olarak ne yapılacağını söyler. Jsperf'e göre çok daha hızlı https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25

Bunu yapmak için sadece düz vanilya javascript kullanmayı seviyorum.

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}

Bu soru üzerine tökezledi ve şu anda kullandığım bir kod pasajı paylaşmak istiyorum:

$.fn.exists = function(callback) {
    var self = this;
    var wrapper = (function(){
            function notExists () {}

            notExists.prototype.otherwise = function(fallback){
                if (!self.length) {                    
                    fallback.call();
                }
            };

            return new notExists;
        })();

    if(self.length) {
        callback.call();    
    }

    return wrapper;
}

Ve şimdi böyle bir kod yazabilirim -

$("#elem").exists(function(){
    alert ("it exists");
}).otherwise(function(){
    alert ("it doesn't exist");
});

Çok fazla kod gibi görünebilir, ancak CoffeeScript'te yazıldığında oldukça küçüktür:

$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists

Bir nesnenin bir nesnenin içinde olup olmadığını görmek istediğim bir durum vardı, bu yüzden seçicinin içindeki bir seçiciyi kontrol etmek için ilk cevaba bir şey ekledim.

// Checks if an object exists.
// Usage:
//
//     $(selector).exists()
//
// Or:
// 
//     $(selector).exists(anotherSelector);
jQuery.fn.exists = function(selector) {
    return selector ? this.find(selector).length : this.length;
};

Nasıl olur:

function exists(selector) {
    return $(selector).length;
}

if (exists(selector)) {
    // do something
}

Çok azdır ve seçici $()her seferinde kapatmanız gerekir .

Bunu kullanıyorum:

    $.fn.ifExists = function(fn) {
      if (this.length) {
        $(fn(this));
      }
    };
    $("#element").ifExists( 
      function($this){
        $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')});               
      }
    ); 

Zinciri yalnızca bir jQuery öğesi varsa çalıştırın - http://jsfiddle.net/andres_314/vbNM3/2/

İşte benim en sevdiğim existyöntem jQuery

$.fn.exist = function(callback) {
    return $(this).each(function () {
        var target = $(this);

        if (this.length > 0 && typeof callback === 'function') {
            callback.call(target);
        }
    });
};

ve seçici mevcut olmadığında geri aramayı destekleyen diğer sürüm

$.fn.exist = function(onExist, onNotExist) {
    return $(this).each(function() {
        var target = $(this);

        if (this.length > 0) {
            if (typeof onExist === 'function') {
                onExist.call(target);
            }
        } else {
            if (typeof onNotExist === 'function') {
                onNotExist.call(target);
            }
        }
    });
};

Misal:

$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);

$("selector") lengthözelliği olan bir nesneyi döndürür . Seçici herhangi bir öğe bulursa, bunlar nesneye dahil edilir. Eğer uzunluğunu kontrol ederseniz, herhangi bir elemanın var olup olmadığını görebilirsiniz. JavaScript'te 0 == false, bu nedenle alamazsanız 0kodunuz çalışır.

if($("selector").length){
   //code in the case
} 

Burada farklı durumların tam örneği ve jQuery seçicisinde dizi veya öğeleri döndürdüğü için çalışıp çalışmadığını doğrudan kullanarak öğenin var olup olmadığını kontrol etmenin yolu gösterilmektedir.

var a = null;

var b = []

var c = undefined ;

if(a) { console.log(" a exist")} else { console.log("a doesn't exit")}
// output: a doesn't exit

if(b) { console.log(" b exist")} else { console.log("b doesn't exit")}
// output: b exist

if(c) { console.log(" c exist")} else { console.log("c doesn't exit")}
// output: c doesn't exit

SON ÇÖZÜM

if($("#xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
//output : xusyxxs doesnn't exist

if($(".xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
    //output : xusyxxs doesnn't exist

Bunu daha büyük olmadığını kontrol etmek gerekmez 0gibi $(selector).length > 0, $(selector).lengthyeter ve elementlerin varlığını kontrol etmek için zarif bir yol. Daha fazla şey yapmak istiyorsanız, bunun için sadece bir işlev yazmaya değer olduğunu düşünmüyorum, evet.

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}