Има ли функция "съществува" за jQuery?

Как да проверите наличността на артикулите в jQuery?

Текущият код, който имам, е както следва:

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

Има ли по-елегантен начин да се подходи към това? Може би плъгин или функция?

2475
27 авг. настроен от Джейк Макгроу на 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 февр. Отговорът е даден от Тим Бю 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 авг. Отговорът е даден от Джейк Макгроу 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 обекти, тогава получаването на първия елемент в масива се връща неопределено.

 if ( $('#myDiv')[0] ) {  } 
346
14 янв. Отговор на Jon Erickson Jan 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 Apr 2011-04-03 15:17 '11 в 15:17 2011-04-03 15:17

Най-бързият и най-семантично разбираем начин да проверите съществуването на действително използване на прост JavaScript:

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

Това е малко по-дълго от алтернативата на дължината на jQuery, но работи по-бързо, защото е собствен метод на JS.

И това е по-добре, отколкото алтернатива на писането на вашата собствена функция jQuery. Тази алтернатива е по-бавна, поради причини, посочени от @snover. Но това също ще даде на други програмисти впечатлението, че съществува () функцията е нещо, което е присъщо на jQuery. JavaScript ще / трябва да разбира другите, които редактират кода ви, без да увеличават размера на дълга.

Забележка. Обърнете внимание на липсата на "#" преди element_id елемент (тъй като това е просто JS, а не jQuery).

82
11 янв. Отговорът се дава на Магне 11 Ян. 2012-01-11 15:27 '12 в 15:27 2012-01-11 15:27

Можете да запишете няколко байта чрез писане:

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

Това работи, защото всеки обект на jQuery също е маскиран като масив, така че можем да използваме оператора на dereference на масива, за да получим първия елемент от масива. Връща undefined ако в указания индекс няма елемент.

58
18 янв. Отговорът е даден от Салман А на 18 януари. 2014-01-18 12:04 '14 в 12:04 2014-01-18 12:04

Можете да използвате:

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

Може би малко по-елегантно.

54
17 сент. Отговор Devon 17 септември 2008-09-17 20:53 '08 в 20:53 ч. 2008-09-17 20:53

Този плъгин може да се използва в израз if като if ($(ele).exist()) { } или с обратни if ($(ele).exist()) { } .

Plug-in

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

Можете да посочите един или два обратни обаждания. Първият ще работи, ако елементът съществува, вторият ще работи, ако елементът не съществува. Въпреки това, ако решите да прехвърлите само една функция, тя ще работи само ако има елемент. По този начин веригата ще умре, ако избраният елемент не съществува. Разбира се, ако съществува, първата функция ще работи и веригата ще продължи.

Имайте предвид, че използването на опцията за обратно извикване помага да се запази веригата - елементът се връща и можете да продължите с верижните команди като всеки друг метод на 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() {   } }) 
52
09 нояб. отговорът е даден SpYk3HH 09 Nov. 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 Отговорът е даден от Алиреза на 20 май '17 в 12:21 2017-05-05 12: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, като търси всички съвпадения с този селектор и ги попълва с масив.

Параметърът ['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;  

В някои случаи това може да е необходимо. Може да се използва в for цикъл, както следва:

  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 авг. отговор, даден от техносавър 12 август 2014-08-12 02:42 '14 в 2: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.'); } 

Все още търся по-добро решение, въпреки че е малко трудно.

Edit: ПРЕДУПРЕЖДЕНИЕ! Това не работи в IE, ако selector е низ.

 $.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE 
32
06 февр. Отговорът е даден на Олег 06 Фев. 2012-02-06 23:37 '12 в 11:37 ч. 2012-02-06 23:37

Можете да проверите дали елементът присъства или не използва дължината в скрипта java. Ако дължината е по-голяма от нула, тогава елементът присъства, ако дължината е нула, тогава няма елемент

 // 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 в 8: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 Отговорът е даден от Тилак Мади на 22 март 2006 г. в 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 Отговорът е даден от Сантяго Хернандес на 04 май '15 в 6: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 в 5:55 2015-08-09 05:55

Вдъхновен от отговора на hiway, измислих следното:

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

jQuery.contains отнема два DOM елемента и проверява дали първият съдържа един.

Използвайте document.documentElement , тъй като първият аргумент изпълнява семантиката на метода exists , когато искаме да го приложим изключително за проверка на съществуването на елемент в текущия документ.

По-долу поставям фрагмент, който сравнява jQuery.exists() с jQuery.exists() $(sel)[0] и $(sel).length , които връщат truthy стойности за $(4) и $(4).exists() връща false , В контекста на проверката за съществуването на елемент в DOM, това изглежда е желаният резултат .

 td { border: 1px solid black } 
22
13 окт. Отговор Oliver 13 oct. 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 отговорът е даден на Сану Утаия Болера на 19 юни '16 в 1: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 нояб. Отговорът е даден от Павел 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.03.2011 в 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 март 2011 г. в 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 Отговор е даден от Андрей Тодорут на 20 юни 17 в 12:43 2017-06-20 12:43
 if ( $('#myDiv').size() > 0 ) { //do something } 

size() брои броя на елементите, върнати от селектора.

8
25 февр. отговорът е даден Mad_Hat 25 фев. 2009-02-25 05:44 '09 в 5:44 ч. 2009-02-25 05:44
  • 1
  • 2

Други въпроси относно таговете на или Задайте въпрос