Apakah ada fungsi "ada" untuk jQuery?

Bagaimana saya bisa memeriksa keberadaan elemen di jQuery?

Kode saat ini yang saya miliki adalah ini:

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

Apakah ada cara yang lebih elegan untuk mendekati ini? Mungkin plugin atau fungsi?

Dalam JavaScript, semuanya 'benar' atau 'palsu', dan untuk angka 0(dan NaN) berarti false, semuanya lainnya true. Jadi Anda bisa menulis:

if ($(selector).length)

Anda tidak perlu >0bagian itu.

Iya!

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

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

Ini sebagai tanggapan terhadap: Herding Code podcast dengan Jeff Atwood

Jika Anda menggunakan

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

Anda akan menyiratkan bahwa rantai itu mungkin terjadi saat tidak.

Ini akan lebih baik:

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

Atau, dari FAQ :

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

Anda juga bisa menggunakan yang berikut ini. Jika tidak ada nilai dalam array objek jQuery maka mendapatkan item pertama dalam array akan kembali tidak terdefinisi.

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

Anda bisa menggunakan ini:

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

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

Cara menjelaskan diri sendiri tercepat dan paling semantik untuk memeriksa keberadaan sebenarnya dengan menggunakan polos JavaScript:

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

Ini sedikit lebih lama untuk menulis daripada alternatif panjang jQuery, tetapi dieksekusi lebih cepat karena ini adalah metode JS asli.

Dan itu lebih baik daripada alternatif menulis jQueryfungsi Anda sendiri . Alternatif itu lebih lambat, karena alasan @snover dinyatakan. Tetapi itu juga akan memberi programmer lain kesan bahwa exists()fungsi adalah sesuatu yang melekat pada jQuery. JavaScriptakan / harus dipahami oleh orang lain yang mengedit kode Anda, tanpa menambah hutang pengetahuan.

NB: Perhatikan kurangnya '#' sebelum element_id(karena ini adalah JS biasa, bukan jQuery).

Anda dapat menyimpan beberapa byte dengan menulis:

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

Ini berfungsi karena setiap objek jQuery juga menyamar sebagai array, sehingga kita bisa menggunakan operator dereferencing array untuk mendapatkan item pertama dari array . Ini kembali undefinedjika tidak ada item pada indeks yang ditentukan.

Kamu bisa menggunakan:

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

Sebuah sedikit lebih elegan, mungkin.

Plugin ini dapat digunakan dalam ifpernyataan suka if ($(ele).exist()) { /* DO WORK */ }atau menggunakan panggilan balik.

Plugin

;;(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

Anda dapat menentukan satu atau dua panggilan balik. Yang pertama akan menyala jika elemen ada, yang kedua akan menyala jika elemen tidak ada. Namun, jika Anda memilih untuk hanya melewati satu fungsi, itu hanya akan menyala ketika elemen ada. Dengan demikian, rantai akan mati jika elemen yang dipilih tidak ada. Tentu saja, jika memang ada, fungsi pertama akan menyala dan rantai akan berlanjut.

Perlu diingat bahwa menggunakan varian callback membantu menjaga chainability - elemen dikembalikan dan Anda dapat melanjutkan perintah chaining seperti dengan metode jQuery lainnya!

Contoh Penggunaan

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    */
    }
})

Saya melihat sebagian besar jawaban di sini tidak akurat sebagaimana mestinya, mereka memeriksa panjang elemen, bisa OK dalam banyak kasus, tetapi tidak 100% , bayangkan jika angka lewat ke fungsi sebagai gantinya, jadi saya prototipe fungsi yang memeriksa semua syarat dan kembalikan jawabannya sebagaimana mestinya:

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

Ini akan memeriksa panjang dan jenisnya, Sekarang Anda dapat memeriksanya dengan cara ini:

$(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

Tidak perlu untuk jQuery kok. Dengan JavaScript biasa, lebih mudah dan benar secara semantik untuk memeriksa:

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

Jika karena alasan apa pun Anda tidak ingin memasukkan id ke elemen, Anda masih dapat menggunakan metode JavaScript lain yang dirancang untuk mengakses DOM.

jQuery benar-benar keren, tapi jangan biarkan JavaScript murni terlupakan ...

Anda bisa menggunakan ini:

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

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

Alasan semua jawaban sebelumnya memerlukan .lengthparameter adalah bahwa mereka sebagian besar menggunakan $()pemilih jquery yang memiliki querySelectorAll di belakang tirai (atau mereka menggunakannya secara langsung). Metode ini agak lambat karena perlu mengurai seluruh pohon DOM mencari semua kecocokan dengan pemilih itu dan mengisi array dengan mereka.

Parameter ['length'] tidak diperlukan atau berguna dan kodenya akan jauh lebih cepat jika Anda langsung menggunakannya document.querySelector(selector), karena mengembalikan elemen pertama yang cocok atau nol jika tidak ditemukan.

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

Namun metode ini membuat kita dengan objek yang sebenarnya dikembalikan; yang baik-baik saja jika itu tidak akan disimpan sebagai variabel dan digunakan berulang kali (sehingga menjaga referensi sekitar jika kita lupa).

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 */

Dalam beberapa kasus ini mungkin diinginkan. Ini dapat digunakan dalam for for loop seperti ini:

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

Jika Anda tidak benar-benar membutuhkan elemen dan ingin mendapatkan / menyimpan hanya benar / salah, cukup gandakan bukan !! Ini berfungsi untuk sepatu yang terlepas, jadi mengapa simpul di sini?

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);

Apa $.contains()yang kamu inginkan?

jQuery.contains( container, contained )

The $.contains()Metode mengembalikan true jika elemen DOM yang disediakan oleh argumen kedua adalah keturunan dari elemen DOM yang disediakan oleh argumen pertama, apakah itu adalah anak langsung atau bersarang lebih dalam. Jika tidak, itu mengembalikan false. Hanya elemen node yang didukung; jika argumen kedua adalah teks atau simpul komentar, $.contains()akan kembali salah.

Catatan : Argumen pertama harus berupa elemen DOM, bukan objek jQuery atau objek JavaScript biasa.

Saya merasa if ($(selector).length) {}tidak cukup. Ini akan merusak aplikasi Anda secara diam-diam ketika selectorbenda kosong {}.

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

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

Satu-satunya saran saya adalah melakukan pemeriksaan tambahan untuk {}.

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

Saya masih mencari solusi yang lebih baik karena ini agak berat.

Edit: PERINGATAN! Ini tidak berfungsi di IE kapan selectorstring.

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

Anda dapat memeriksa elemen ada atau tidak menggunakan panjang dalam skrip java. Jika panjang lebih besar dari nol maka elemen hadir jika panjangnya nol maka elemen tidak ada

// 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
}

Memeriksa keberadaan elemen didokumentasikan dengan rapi di situs web jQuery resmi itu sendiri!

Gunakan properti .length dari koleksi jQuery yang dikembalikan oleh pemilih Anda:

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

Perhatikan bahwa tidak selalu perlu untuk menguji apakah suatu elemen ada. Kode berikut akan menunjukkan elemen jika ada, dan tidak melakukan apa pun (tanpa kesalahan) jika tidak:

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

ini sangat mirip dengan semua jawaban, tetapi mengapa tidak menggunakan !operator dua kali sehingga Anda bisa mendapatkan boolean:

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

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

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

Coba uji untuk DOMelemen

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

Terinspirasi oleh jawaban hiway, saya datang dengan yang berikut:

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

jQuery.contains mengambil dua elemen DOM dan memeriksa apakah yang pertama berisi yang kedua.

Menggunakan document.documentElementsebagai argumen pertama memenuhi semantik existsmetode ketika kita ingin menerapkannya semata-mata untuk memeriksa keberadaan elemen dalam dokumen saat ini.

Di bawah, saya telah mengumpulkan cuplikan yang membandingkan jQuery.exists() terhadap $(sel)[0]dan $(sel).lengthpendekatan yang keduanya mengembalikan truthynilai untuk $(4)sementara $(4).exists()kembali false. Dalam konteks memeriksa keberadaan elemen dalam DOM ini tampaknya merupakan hasil yang diinginkan .

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

Tidak perlu jQuery (solusi dasar)

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

Opsi yang jauh lebih banyak performan di bawah ini (perhatikan kurangnya titik sebelum kelas).

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

querySelector menggunakan mesin pencocokan yang tepat seperti $ () (mendesis) di jQuery dan menggunakan lebih banyak daya komputasi tetapi dalam 99% kasus akan baik-baik saja. Opsi kedua lebih eksplisit dan memberi tahu kode apa yang harus dilakukan. Ini jauh lebih cepat menurut jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25

Saya hanya ingin menggunakan javascript vanilla polos untuk melakukan ini.

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

Saya menemukan pertanyaan ini dan saya ingin membagikan potongan kode yang saat ini saya gunakan:

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

Dan sekarang saya dapat menulis kode seperti ini -

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

Ini mungkin tampak banyak kode, tetapi ketika ditulis dalam CoffeeScript itu cukup kecil:

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

Saya punya kasus di mana saya ingin melihat apakah ada objek di dalam yang lain jadi saya menambahkan sesuatu ke jawaban pertama untuk memeriksa pemilih di dalam pemilih ..

// 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;
};

Bagaimana tentang:

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

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

Ini sangat minim dan menghemat Anda harus melampirkan pemilih dengan $()setiap kali.

Saya menggunakan ini:

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

Jalankan rantai hanya jika elemen jQuery ada - http://jsfiddle.net/andres_314/vbNM3/2/

Ini adalah existmetode favorit saya di jQuery

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

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

dan versi lain yang mendukung panggilan balik ketika pemilih tidak ada

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

Contoh:

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

$("selector") mengembalikan objek yang memiliki lengthproperti. Jika pemilih menemukan elemen, mereka akan dimasukkan dalam objek. Jadi, jika Anda memeriksa panjangnya, Anda dapat melihat apakah ada elemen. Dalam JavaScript 0 == false, jadi jika Anda tidak mendapatkan 0kode Anda akan berjalan.

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

Berikut ini adalah contoh lengkap dari berbagai situasi dan cara untuk memeriksa apakah elemen menggunakan direct if jika pada jQuery selector mungkin atau mungkin tidak berfungsi karena ia mengembalikan array atau elemen.

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

SOLUSI AKHIR

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

Anda tidak perlu memeriksa apakah lebih besar dari 0suka $(selector).length > 0, $(selector).lengthitu cukup dan cara yang elegan untuk memeriksa keberadaan elemen. Saya tidak berpikir itu layak untuk menulis fungsi hanya untuk ini, jika Anda ingin melakukan lebih banyak hal tambahan, ya.

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