Ці ёсць функцыя "існуе" для jQuery?

Як праверыць наяўнасць элемента ў jQuery?

Бягучы код, які ў мяне ёсць, наступны:

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

Ці ёсць больш элегантны спосаб наблізіцца да гэтага? Магчыма, убудова або функцыя?

2475
27 авг. зададзены Jake McGraw 27 жнів. 2008-08-27 22:49 '08 у 22:49 2008-08-27 22:49
@ 40 адказаў
  • 1
  • 2

У JavaScript усе "праўдзівае" ці "ілжывае", а для лікаў 0 (і NaN) азначае false , усё астатняе true . Таму вы можаце напісаць:

 if ($(selector).length) 

Вам не патрэбна гэтая частка >0 .

2204
25 февр. адказ дадзены Tim Büthe 25 февр. 2009-02-25 22:16 '09 а 22:16 2009-02-25 22:16

Да!

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

Гэта ў адказ на: падкаст пад патрон з Джэфам Этвуд

1289
27 авг. адказ дадзены Jake McGraw 27 жнів. 2008-08-27 22:50 '08 а 22:50 2008-08-27 22:50

Калі вы выкарыстоўвалі

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

вы б мелі на ўвазе, што ланцужок была магчымая, калі гэта не так.

Гэта было б лепш:

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

У якасці альтэрнатывы з часта задаваных пытанняў :

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

Вы таксама можаце выкарыстоўваць наступнае. Калі ў масіве аб'ектаў jQuery няма значэнняў, то атрыманне першага элемента ў масіве вяртае undefined.

 if ( $('#myDiv')[0] ) {  } 
346
14 янв. адказ дадзены Jon Erickson 14 студз. 2009-01-14 22:46 '09 а 22:46 2009-01-14 22:46

Вы можаце выкарыстоўваць гэта:

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

 // if element does not exist if(!$('selector').length){  } 
113
03 апр. адказ дадзены Yanni 03 крас. 2011-04-03 15:17 '11 у 15:17 2011-04-03 15:17

Самы хуткі і найбольш семантычна зразумелы спосаб праверыць існаванне на самай справе, выкарыстоўваючы просты JavaScript:

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

Гэта трохі даўжэй, чым альтэрнатыва jQuery length, але выконваецца хутчэй, так як гэта ўласны метад JS.

І гэта лепш, чым альтэрнатыва напісанню вашай ўласнай функцыі jQuery. Гэтая альтэрнатыва павольней, па прычынах, названым @snover. Але гэта таксама дало б іншым праграмістам ўражанне, што функцыя exists () - гэта нешта, што ўласціва jQuery. JavaScript будзе / павінен разумець іншыя, рэдагуе ваш код, без павелічэння аб'ёму даўгавых абавязацельстваў.

Заўвага. Звярніце ўвагу на адсутнасць "#" перад элементам element_id (так як гэта просты JS, а не jQuery).

82
11 янв. адказ дадзены Magne 11 студз. 2012-01-11 15:27 '12 у 15:27 2012-01-11 15:27

Вы можаце захаваць некалькі байтаў, напісаўшы:

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

Гэта працуе, таму што кожны аб'ект jQuery таксама маскіруецца як масіў, таму мы можам выкарыстоўваць аператар разнаймення масіва, каб атрымаць першы элемент з масіва. Ён вяртае undefined , калі ў паказаным індэксе няма элемента.

58
18 янв. адказ дадзены Salman A 18 студз. 2014-01-18 12:04 '14 у 12:04 2014/01/18 00:04

Вы можаце выкарыстоўваць:

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

A маленькі больш элегантны, магчыма.

54
17 сент. адказ дадзены Devon 17 сент. 2008-09-17 20:53 '08 а 20:53 2008-09-17 20:53

Гэты убудова можа выкарыстоўвацца ў выразе if накшталт if ($(ele).exist()) { } або з выкарыстаннем зваротнага выкліку.

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

Вы можаце паказаць адзін ці два зваротных выкліку. Першы будзе спрацоўваць, калі элемент існуе, другі будзе спрацоўваць, калі элемент не існуе. Аднак, калі вы вырашыце перадаць толькі адну функцыю, яна будзе спрацоўваць толькі пры наяўнасці элемента. Такім чынам, ланцуг будзе паміраць, калі абраны элемент не існуе. Вядома, калі ён існуе, першая функцыя будзе спрацоўваць, і ланцужок будзе працягнутая.

Майце на ўвазе, што выкарыстанне варыянту callback дапамагае падтрымліваць ланцужок - вяртаецца элемент, і вы можаце працягваць каманды ланцужкі, як з любым іншым метадам jQuery!

прыклад выкарыстання

 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() {   } }) NOT EXIST 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 нояб. адказ дадзены SpYk3HH 09 лістапада. 2012-11-09 20:47 '12 а 20:47 2012/11/09 20:47

Я бачу, што большасць адказаў тут не з'яўляюцца дакладнымі, як яны павінны быць, яны правяраюць даўжыню элемента, у многіх выпадках гэта можа быць нармальна, але не на 100%, уявіце, што замест функцыі перадаецца лік, таму я ствараю прататып функцыі, якая правярае ўсе ўмовы і вярнуць адказ так, як павінна быць:

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

Гэта праверыць даўжыню і тып, зараз вы можаце праверыць гэта наступным чынам:

 $(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 адказ дадзены Alireza 20 мая '17 у 12:21 2017/05/20 00:21

Няма неабходнасці ў jQuery. З простым JavaScript прасцей і семантычна карэктна правяраць:

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

Калі па якой-небудзь прычыне вы не хочаце ўказваць ідэнтыфікатар элемента, вы ўсё роўна можаце выкарыстоўваць любы іншы метад JavaScript, прызначаны для доступу да DOM.

jQuery сапраўды класны, але не дазваляйце чыстаму JavaScript забыцца ...

47
14 нояб. адказ дадзены amypellegrini 14 лістапада. 2011-11-14 17:20 '11 у 17:20 2011-11-14 17:20

Вы можаце выкарыстоўваць гэта:

 jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){} 
42
01 июня '13 в 10:20 2013-06-01 10:20 адказ дадзены Amitābha 01 чэрвеня '13 у 10:20 2013/06/01 10:20

Прычына, па якой усе папярэднія адказы патрабуюць параметру .length , складаецца ў тым, што яны ў асноўным выкарыстоўваюць селектар jquery $() , у якога ёсць запросSelectorAll за шторамі (або яны выкарыстоўваюць яго наўпрост). Гэты метад даволі павольны, паколькі яму неабходна прааналізаваць усё дрэва DOM, шукаючы адпаведнасці all да гэтага селектары і запаўняючы іх масівам.

Параметр [ 'length'] не патрэбны ці карысны, і код будзе нашмат хутчэй, калі вы выкарыстоўваеце замест яго замест document.querySelector(selector) , таму што ён вяртае першы элемент, які ён адпавядае, або null, калі не знойдзены.

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

Аднак гэты метад пакідае нам фактычны які вяртаецца аб'ект; што выдатна, калі ён не будзе захаваны як зменная і выкарыстоўваецца паўторна (такім чынам, захоўваючы спасылку, калі мы забудземся).

 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;  element which will linger after removal 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;  

У некаторых выпадках гэта можа быць неабходна. Ён можа выкарыстоўвацца ў цыкле for наступным чынам:

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

Калі вам сапраўды не патрэбен элемент і вы хочаце атрымаць / захаваць толькі ісціну / хлусня, проста не падвойваюцца! Ён працуе на туфлі, якія развязаны, таму навошта тут тут?

 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 авг. адказ дадзены technosaurus 12 жнів. 2014-08-12 02:42 '14 у 02:42 2014/08/12 02:42

Я выявіў, што if ($(selector).length) {} недастаткова. Ён будзе адключаць ваша прыкладанне, калі selector - пусты аб'ект {} .

 var $target = $({}); console.log($target, $target.length); // Console output: // ------------------------------------- // [▼ Object ] 1 // ► __proto__: Object 

Маё адзінае прапанова - выканаць дадатковую праверку для {} .

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

Я ўсё яшчэ шукаю лепшае рашэнне, хоць гэта крыху цяжка.

Змяніць: ПАПЯРЭДЖАНЬНЕ! Гэта не працуе ў IE, калі selector - гэта радок.

 $.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE 
32
06 февр. адказ дадзены Oleg 06 февр. 2012-02-06 23:37 '12 у 23:37 2012-02-06 23:37

Вы можаце праверыць, што элемент прысутнічае ці не выкарыстоўвае даўжыню ў java script. Калі даўжыня больш за нуль, тады элемент прысутнічае, калі даўжыня роўная нулю, тады элемента няма

 // 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 адказ дадзены Anurag Deokar 09 ліпеня '15 ў 15:39 2015/07/09 15:39

Ці з'яўляецца $.contains() тым, што вы хочаце?

jQuery.contains( container, contained )

Метад $.contains() вяртае true, калі элемент DOM, прадстаўлены другім аргументам, з'яўляецца нашчадкам элемента DOM, прадастаўленага першым аргументам, ці з'яўляецца ён прамым нашчадкам ці ўкладзены больш глыбока. У адваротным выпадку вяртаецца false. Падтрымліваюцца толькі вузлы элементаў; калі другі аргумент з'яўляецца вузлом тэксту або каментара, $.contains() верне false.

Заўвага. Першы аргумент павінен быць элементам DOM, а не аб'ектам jQuery або звычайным аб'ектам JavaScript.

30
23 окт. адказ дадзены hiway 23 каст. 2013-10-23 08:46 '13 у 08:46 2013/10/23 08:46

Праверка наяўнасці элемента захаваная на афіцыйным сайце jQuery!

Выкарыстоўвайце ўласцівасць length калекцыі jQuery, вернутай вашым селектар:

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

Звярніце ўвагу, што не заўсёды неабходна правяраць, ці існуе элемент. Наступны код пакажа элемент, калі ён існуе, і нічога не рабіць (без памылак), калі гэта не так:

 $("#myDiv").show(); 
26
22 марта '17 в 17:32 2017-03-22 17:32 адказ дадзены Tilak Maddy 22 сакавіка '17 у 17:32 2017/03/22 17:32

гэта вельмі падобна на ўсе адказы, але чаму б не выкарыстоўваць аператар ! двойчы, каб вы маглі атрымаць лагічнае значэнне:

 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 адказ дадзены Santiago Hernández 04 мая '15 у 06:31 2015/05/04 06:31
 $(selector).length  //Do something 
25
28 мая '12 в 15:58 2012-05-28 15:58 адказ дадзены SJG 28 мая '12 У 15:58 2012-05-28 15:58

Паспрабуйце выканаць тэставанне элемента DOM

 if (!!$(selector)[0]) // do stuff 
23
09 авг. адказ дадзены guest271314 09 жнів. 2015-08-09 05:55 '15 у 05:55 2015/08/09 05:55

Натхнёны hiway answer Я прыдумаў наступнае:

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

jQuery.contains бярэ два элемента DOM і правярае, ці ўтрымоўвае першы першы.

Выкарыстанне document.documentElement , паколькі першы аргумент выконвае семантыку метаду exists , калі мы хочам прымяніць яго выключна для праверкі існавання элемента ў бягучым дакуменце.

Ніжэй я сабраў фрагмент, які параўноўвае jQuery.exists() з падыходамі $(sel)[0] і $(sel).length , якія вяртаюць значэння truthy для $(4) , а $(4).exists() вяртае false . У кантэксце праверкі існавання элемента ў DOM гэта, відаць, жаданы вынік.

 td { border: 1px solid black } 
22
13 окт. адказ дадзены Oliver 13 каст. 2015-10-13 23:01 '15 а 23:01 2015/10/13 23:01

Мне проста падабаецца выкарыстоўваць просты ванільны javascript для гэтага.

 function isExists(selector){ return document.querySelectorAll(selector).length>0; } 
20
19 июня '16 в 1:37 2016-06-19 01:37 адказ дадзены Sanu Uthaiah Bollera 19 чэрвеня '16 у 01:37 2016/06/19 01:37

Я наткнуўся на гэтае пытанне, і я хацеў бы падзяліцца фрагментам кода, які я выкарыстоўваю ў цяперашні час:

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

І зараз я магу напісаць такі код -

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

Гэта можа здацца вялікай колькасцю кода, але пры напісанні на CoffeeScript гэта даволі мала:

 $.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 адказ дадзены Eternal1 28 ліпеня '14 ў 13:50 2014/07/28 13:50

Няма неабходнасці ў jQuery

 if(document.querySelector('.a-class')) { // do something } 
18
28 нояб. адказ дадзены Pawel 28 лістапада. 2016-11-28 13:43 '16 у 13:43 2016/11/28 13:43

У мяне быў выпадак, калі я хацеў паглядзець, ці існуе аб'ект ўнутры іншага, таму я дадаў нешта ў першы адказ, каб праверыць селектар ўнутры селектара.

 // 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 апр. адказ дадзены jcreamer898 06 крас. 2012-04-06 00:02 '12 у 0:02 2012-04-06 00:02

Як наконт:

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

Гэта вельмі мінімальна і эканоміць час, калі вам трэба кожны раз заключаць селектар $() .

16
05 марта '14 в 0:15 2014-03-05 00:15 адказ дадзены GSTAR 05 сакавіка '14 у 0:15 2014/03/05 00:15

Я выкарыстоўваю гэта:

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

Выканаць ланцужок толькі ў тым выпадку, калі існуе элемент jQuery - http://jsfiddle.net/andres_314/vbNM3/2/

12
02 авг. адказ дадзены andy_314 02 жнів. 2012-08-02 00:56 '12 у 0:56 2012-08-02 00:56

Вось мой любімы метад exist ў jQuery

 $.fn.exist = function(callback) { return $(this).each(function () { var target = $(this); if (this.length > 0  typeof callback === 'function') { callback.call(target); } }); }; 

і іншая версія, якая падтрымлівае зваротны выклік, калі селектар не існуе

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

прыклад:

 $('#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 адказ дадзены ducdhm 08 сакавіка '16 у 20:06 2016/03/08 20:06

$("selector" ) вяртае аб'ект, які мае ўласцівасць length . Калі селектар знойдзе якія-небудзь элементы, яны будуць уключаны ў аб'ект. Таму, калі вы праверыце яго даўжыню, вы ўбачыце, ці існуюць якія-небудзь элементы. У JavaScript 0 == false , таму, калі вы не атрымаеце 0 ваш код будзе працаваць.

 if($("selector").length){ //code in the case } 
11
25 марта '16 в 14:05 2016-03-25 14:05 адказ дадзены Kamuran Sönecek 25 сакавіка '16 у 14:05 2016/03/25 14:05

Вам не трэба правяраць, ці дастаткова гэтага 0 як $(selector).length > 0 , $(selector).length і элегантны спосаб праверыць існаванне элементаў. Я не думаю, што варта напісаць функцыю толькі для гэтага, калі вы хочаце зрабіць больш лішніх рэчаў, так.

 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 адказ дадзены Andrei Todorut 20 чэрвеня '17 у 12:43 2017/06/20 00:43
 if ( $('#myDiv').size() > 0 ) { //do something } 

size() падлічвае колькасць элементаў, якiя вяртаюцца селектарам

8
25 февр. адказ дадзены Mad_Hat 25 февр. 2009-02-25 05:44 '09 у 05:44 2009-02-25 05:44
  • 1
  • 2

Іншыя пытанні па пазнаках або Задайце пытанне