Apakah ada fungsi "ada" untuk jQuery?

Bagaimana cara memeriksa ketersediaan barang di jQuery?

Kode saat ini yang saya miliki adalah sebagai berikut:

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

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

2475
27 авг. ditetapkan oleh Jake McGraw pada 27 Agustus 2008-08-27 22:49 '08 pada 10:49 2008-08-27 22:49
@ 40 jawaban
  • 1
  • 2

Dalam JavaScript, semuanya "benar" atau "salah", dan untuk angka 0 (dan NaN) itu berarti false , yang lainnya true . Karena itu Anda dapat menulis:

 if ($(selector).length) 

Anda tidak memerlukan bagian ini >0 .

2204
25 февр. Jawabannya diberikan oleh Tim Büthe 25 Feb. 2009-02-25 22:16 '09 jam 10:16 malam 2009-02-25 22:16

Ya

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

Ini sebagai tanggapan terhadap: podcast yang dilindungi oleh Jeff Atwood

1289
27 авг. Jawaban diberikan oleh Jake McGraw 27 Agustus 2008-08-27 22:50 '08 pada pukul 10:50 2008-08-27 22:50

Jika Anda menggunakan

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

Anda bisa berarti bahwa rantai itu mungkin, jika tidak.

Akan lebih baik:

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

Sebagai alternatif untuk pertanyaan umum :

 if ( $('#myDiv').length ) {  } 

Anda juga dapat menggunakan yang berikut ini. Jika tidak ada nilai dalam array objek jQuery, maka mendapatkan elemen pertama dalam array mengembalikan undefined.

 if ( $('#myDiv')[0] ) {  } 
346
14 янв. Membalas Jon Erickson 14 Jan 2009-01-14 22:46 '09 pada pukul 10:46 2009-01-14 22:46

Anda bisa menggunakan ini:

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

 // if element does not exist if(!$('selector').length){  } 
113
03 апр. Balas diberikan oleh Yanni 03 Apr 2011-04-03 15:17 '11 pada 15:17 2011-04-03 15:17

Cara tercepat dan paling dimengerti secara semantik untuk memeriksa keberadaan sebenarnya menggunakan JavaScript sederhana:

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

Ini sedikit lebih panjang daripada alternatif panjang jQuery, tetapi berjalan lebih cepat karena ini adalah metode JS sendiri.

Dan ini lebih baik daripada alternatif untuk menulis fungsi jQuery Anda sendiri. Alternatif ini lebih lambat, karena alasan yang diberikan oleh @snover. Tapi itu juga akan memberi programmer lain kesan bahwa fungsi exist () adalah sesuatu yang melekat pada jQuery. JavaScript akan / seharusnya memahami orang lain yang mengedit kode Anda tanpa menambah jumlah hutang.

Catatan Perhatikan tidak adanya "#" sebelum elemen element_id (karena ini adalah JS sederhana, bukan jQuery).

82
11 янв. Jawabannya diberikan Magne 11 Januari. 2012-01-11 15:27 '12 pada 15:27 2012-01-11 15:27

Anda dapat menyimpan beberapa byte dengan menulis:

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

Ini berfungsi karena setiap objek jQuery juga disamarkan sebagai array, jadi kita bisa menggunakan operator dereference array untuk mendapatkan elemen pertama dari array. Mengembalikan undefined jika tidak ada item dalam indeks yang ditentukan.

58
18 янв. Jawabannya diberikan oleh Salman A pada 18 Januari. 2014-01-18 12:04 '14 pada 12:04 2014-01-18 12:04

Anda bisa menggunakan:

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

Mungkin sedikit lebih elegan.

54
17 сент. Balas Devon 17 Sep 2008-09-17 20:53 '08 pada 20:53 2008-09-17 20:53

Plugin ini dapat digunakan dalam ekspresi if seperti if ($(ele).exist()) { } 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 berfungsi jika elemen ada, yang kedua akan bekerja jika elemen tidak ada. Namun, jika Anda memutuskan untuk mentransfer hanya satu fungsi, itu hanya akan berfungsi jika ada elemen. Dengan demikian, rantai akan mati jika elemen yang dipilih tidak ada. Tentu saja, jika ada, fungsi pertama akan berfungsi, dan rantai akan berlanjut.

Perlu diingat bahwa menggunakan opsi panggilan balik membantu mempertahankan rantai - elemen dikembalikan, dan Anda dapat melanjutkan perintah rantai seperti metode jQuery lainnya!

Contoh penggunaan

 if ($.exist('#eleID')) {  } // param as STRING if ($.exist($('#eleID'))) {  } // param as jQuery OBJECT if ($('#eleID').exist()) {  } // enduced on jQuery OBJECT $.exist('#eleID', function() { // param is STRING  CALLBACK METHOD   }, function() { // param is STRING  CALLBACK METHOD   }) $('#eleID').exist(function() { // enduced on jQuery OBJECT with CALLBACK METHOD   }) $.exist({ // param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD element: '#eleID', callback: function() {   } }) 
52
09 нояб. jawabannya diberikan SpYk3HH 09 Nov. 2012-11-09 20:47 '12 pada jam 8:47 2012-11-09 20:47

Saya melihat bahwa sebagian besar jawaban di sini tidak seakurat yang seharusnya, mereka memeriksa panjang elemen, dalam banyak kasus itu mungkin normal , tetapi tidak 100%, bayangkan bahwa angka dilewatkan daripada fungsi, jadi saya membuat prototipe fungsi yang memeriksa semua kondisi dan mengembalikan jawaban 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 sebagai berikut:

 $(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 
48
20 мая '17 в 12:21 2017-05-20 12:21 Jawaban diberikan oleh Alireza pada 20 Mei '17 pukul 12:21 2017-05-05 12:21

Tidak perlu jQuery. Dengan JavaScript sederhana, lebih mudah dan semantik benar untuk memeriksa:

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

Jika karena alasan apa pun Anda tidak ingin menentukan pengidentifikasi elemen, Anda masih dapat menggunakan metode JavaScript lain yang dimaksudkan untuk mengakses DOM.

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

47
14 нояб. jawabannya diberikan amypellegrini 14 nov. 2011-11-14 17:20 '11 pada 17:20 2011-11-14 17:20

Anda bisa menggunakan ini:

 jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){} 
42
01 июня '13 в 10:20 2013-06-01 10:20 jawabannya diberikan Amitābha 01 Juni '13 pada 10:20 2013-06-01 10:20

Alasan semua respons sebelumnya memerlukan parameter .length adalah bahwa mereka sebagian besar menggunakan pemilih jquery $() , yang memiliki permintaan SelectorAll di balik tirai (atau mereka menggunakannya secara >semua kecocokan dengan pemilih ini dan mengisinya dengan array.

Parameter ['length'] tidak diperlukan atau berguna, dan kode akan jauh lebih cepat jika Anda menggunakan document.querySelector(selector) alih-alih, 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); }  var myelement = elementIfExists("#myid") || myfallbackelement; 

Namun, metode ini membuat kita dengan objek pengembalian yang sebenarnya; yang tidak masalah jika tidak disimpan sebagai variabel dan digunakan kembali (sehingga menyimpan tautan 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"));  console.log(myel);  myel=null;  

Dalam beberapa kasus ini mungkin diperlukan. Ini dapat digunakan dalam for for sebagai berikut:

  for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel)) if (myel == myblacklistedel) break; 

Jika Anda benar-benar tidak membutuhkan elemen dan Anda ingin mendapatkan / menyimpan hanya kebenaran / salah, jangan gandakan! Dia bekerja pada sepatu yang tidak terikat, jadi mengapa dia ada di sini?

 function elementExists(selector){ return !!document.querySelector(selector); }  var hastables = elementExists("table");  if (hastables){  } setTimeOut(function (){if (hastables  !elementExists("#mytablecss")) alert("bad table layouts");},3000); 
37
12 авг. jawaban yang diberikan oleh technosaurus 12 Agustus 2014-08-12 02:42 '14 pada 2:42 2014-08-12 02:42

Saya menemukan bahwa if ($(selector).length) {} tidak cukup. Ini akan menonaktifkan aplikasi Anda ketika selector adalah objek {} 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, meskipun agak sulit.

Edit: PERINGATAN! Ini tidak berfungsi di IE jika selector adalah string.

 $.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE 
32
06 февр. Jawabannya diberikan Oleg 06 Feb. 2012-02-06 23:37 '12 pada 11:37 siang 2012-02-06 23:37

Anda dapat memverifikasi bahwa elemen tersebut ada atau tidak menggunakan panjang dalam skrip java. Jika panjangnya lebih besar dari nol, maka elemennya ada, jika panjangnya nol, maka tidak ada elemen

 // 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 } 
30
09 июля '15 в 15:39 2015-07-09 15:39 jawabannya diberikan oleh Anurag Deokar 09 Juli 15 di 15:39 2015-07-09 15:39

Apakah $.contains() yang Anda inginkan?

jQuery.contains( container, contained )

Metode $.contains() mengembalikan true jika elemen DOM yang disediakan oleh argumen kedua adalah turunan dari elemen DOM yang disediakan oleh argumen pertama, apakah itu merupakan turunan >$.contains() akan mengembalikan false.

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

30
23 окт. Hiway diposting pada 23 Oktober 2013-10-23 08:46 '13 pada 8:46 2013-10-23 08:46

Periksa ketersediaan barang ditangkap di situs web jQuery resmi!

Gunakan properti panjang koleksi jQuery yang dikembalikan oleh pemilih Anda:

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

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

 $("#myDiv").show(); 
26
22 марта '17 в 17:32 2017-03-22 17:32 Jawabannya diberikan oleh Tilak Maddy pada 22 Maret 17 di 17:32 2017-03-22 17:32

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

 jQuery.fn.exists = function(){return !!this.length}; if ($(selector).exists()) { // the element exists, now what?... } 
25
04 мая '15 в 6:31 2015-05-04 06:31 Jawaban diberikan oleh Santiago Hernández 04 Mei '15 pukul 06:31 2015-05-04 06:31
 $(selector).length  //Do something 
25
28 мая '12 в 15:58 2012-05-28 15:58 jawabannya diberikan oleh SJG pada 28 Mei '12 pada 15:58 2012-05-28 15:58

Coba pengujian elemen DOM .

 if (!!$(selector)[0]) // do stuff 
23
09 авг. jawabannya diberikan oleh guest271314 09 Agustus. 2015-08-09 05:55 '15 pada 5:55 2015-08-09 05:55

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

Gunakan document.documentElement , karena argumen pertama melakukan semantik dari metode yang exists saat kami ingin menerapkannya secara eksklusif untuk memeriksa keberadaan elemen dalam dokumen saat ini.

Di bawah ini, saya mengumpulkan cuplikan yang membandingkan jQuery.exists() dengan pendekatan $(sel)[0] dan $(sel).length , yang mengembalikan nilai truthy untuk $(4) , dan $(4).exists() mengembalikan false . Dalam konteks memeriksa keberadaan elemen dalam DOM, ini tampaknya menjadi hasil yang diinginkan .

 td { border: 1px solid black } 
22
13 окт. Jawaban diberikan kepada Oliver 13 Oktober. 2015-10-13 23:01 '15 jam 11:01 malam 2015-10-13 23:01

Saya hanya suka menggunakan javascript vanilla polos untuk ini.

 function isExists(selector){ return document.querySelectorAll(selector).length>0; } 
20
19 июня '16 в 1:37 2016-06-19 01:37 jawabannya diberikan Sanu Uthaiah Bollera 19 Juni '16 pukul 1:37 2016-06-19 01:37

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 itu -

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

Ini mungkin tampak seperti banyak kode, tetapi ketika menulis dalam CoffeeScript, ini cukup sedikit:

 $.fn.exists = (callback) -> exists = @length callback.call() if exists new class otherwise: (fallback) -> fallback.call() if not exists 
18
28 июля '14 в 13:50 2014-07-28 13:50 jawabannya diberikan Eternal1 28 Juli '14 pada 13:50 2014-07-28 13:50

Tidak perlu jQuery

 if(document.querySelector('.a-class')) { // do something } 
18
28 нояб. Jawabannya diberikan oleh Pawel 28 November. 2016-11-28 13:43 '16 pada pukul 1:43 malam 2016-11-28 13:43

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; }; 
17
06 апр. balasan diberikan oleh jcreamer898 06 Apr 2012-04-06 00:02 '12 pada 0:02 2012-04-06 00:02

Bagaimana dengan:

 function exists(selector) { return $(selector).length; } if (exists(selector)) { // do something } 

Ini sangat minim dan menghemat waktu ketika Anda harus memasukkan pemilih $() setiap kali.

16
05 марта '14 в 0:15 2014-03-05 00:15 jawabannya diberikan GSTAR 05 Maret '14 pada 0:15 2014-03-05 00:15

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 ada elemen jQuery - http://jsfiddle.net/andres_314/vbNM3/2/

12
02 авг. jawabannya diberikan andy_314 02 Agustus. 2012-08-02 00:56 '12 pada 0:56 2012-08-02 00:56

Inilah metode favorit saya yang exist 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 } ); 
11
08 марта '16 в 20:06 2016-03-08 20:06 jawabannya diberikan oleh ducdhm pada 08 Maret '16 pada 20:06 2016-03-08 20:06

$("selector" ) mengembalikan objek yang memiliki properti length . Jika pemilih menemukan item, mereka akan dimasukkan dalam objek. Karena itu, jika Anda memeriksa panjangnya, Anda akan melihat apakah ada elemen. Dalam javascript 0 == false , jadi jika Anda tidak mendapatkan 0 kode Anda akan berfungsi.

 if($("selector").length){ //code in the case } 
11
25 марта '16 в 14:05 2016-03-25 14:05 jawabannya diberikan oleh Kamuran Sönecek pada 25 Maret '16 pukul 14:05 2016-03-25 14:05

Anda tidak perlu memeriksa apakah 0 cukup sebagai $(selector).length > 0 , $(selector).length dan cara yang elegan untuk memeriksa keberadaan elemen. Saya rasa tidak ada gunanya 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 } 
9
20 июня '17 в 12:43 2017-06-20 12:43 Jawaban diberikan oleh Andrei Todorut pada 20 Juni '17 pada 12:43 2017-06-20 12:43
 if ( $('#myDiv').size() > 0 ) { //do something } 

size() menghitung jumlah elemen yang dikembalikan oleh pemilih.

8
25 февр. jawabannya diberikan Mad_Hat 25 Feb. 2009-02-25 05:44 '09 pada pukul 5:44 2009-02-25 05:44
  • 1
  • 2

Pertanyaan lain tentang tag atau Ajukan Pertanyaan