¿Existe una función "existe" para jQuery?

¿Cómo comprobar la disponibilidad de artículos en jQuery?

El código actual que tengo es el siguiente:

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

¿Hay una manera más elegante de abordar esto? Tal vez un plugin o característica?

2475
27 авг. fijado por Jake McGraw el 27 de agosto 2008-08-27 22:49 '08 a las 10:49 pm 2008-08-27 22:49
@ 40 respuestas
  • 1
  • 2

En JavaScript, todo es "verdadero" o "falso", y para los números 0 (y NaN) significa false , todo lo demás es true . Por lo tanto puedes escribir:

 if ($(selector).length) 

No necesitas esta parte >0 .

2204
25 февр. La respuesta la da Tim Büthe el 25 de febrero. 2009-02-25 22:16 '09 a las 10:16 pm 2009-02-25 22:16

Si

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

Esto es en respuesta a: podcast patrocinado por Jeff Atwood

1289
27 авг. La respuesta la da Jake McGraw el 27 de agosto. 2008-08-27 22:50 '08 a las 10:50 pm 2008-08-27 22:50

Si usaste

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

Usted querría decir que la cadena era posible, si no lo es.

Sería mejor:

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

Como alternativa a las preguntas frecuentes :

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

También puedes usar lo siguiente. Si no hay valores en la matriz de objetos jQuery, obtener el primer elemento de la matriz devuelve un valor indefinido.

 if ( $('#myDiv')[0] ) {  } 
346
14 янв. Responder a Jon Erickson 14 de enero 2009-01-14 22:46 '09 a las 10:46 pm 2009-01-14 22:46

Puedes usar esto:

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

 // if element does not exist if(!$('selector').length){  } 
113
03 апр. Respuesta dada por Yanni 03 abr. 2011-04-03 15:17 '11 a las 15:17 2011-04-03 15:17

La forma más rápida y más comprensible semánticamente de verificar la existencia de usar un JavaScript simple:

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

Esto es un poco más largo que la alternativa a jQuery, pero se ejecuta más rápido porque es un método propio de JS.

Y esto es mejor que una alternativa a escribir tu propia función jQuery. Esta alternativa es más lenta, por razones dadas por @snover. Pero también le daría a otros programadores la impresión de que la función existencia () es algo inherente en jQuery. JavaScript debe / debería entender que otros editen su código sin aumentar el monto de la deuda.

Nota Note la ausencia de un "#" antes del elemento element_id (ya que este es un JS simple, no jQuery).

82
11 янв. La respuesta se da Magne 11 jan. 2012-01-11 15:27 '12 a las 15:27 2012-01-11 15:27

Puedes guardar algunos bytes escribiendo:

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

Esto funciona porque cada objeto jQuery también está enmascarado como una matriz, por lo que podemos usar el operador de desdiferenciación de la matriz para obtener el primer elemento de la matriz. Devuelve undefined si no hay ningún elemento en el índice especificado.

58
18 янв. La respuesta la da Salman A el 18 de enero. 2014-01-18 12:04 '14 a las 12:04 2014-01-18 12:04

Puedes usar:

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

Un poco más elegante, quizás.

54
17 сент. Responder Devon Sep 17 2008-09-17 20:53 '08 a las 8:53 pm 2008-09-17 20:53

Este complemento se puede usar en una expresión if como if ($(ele).exist()) { } o mediante el uso de devoluciones de llamada.

Complemento

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

Puede especificar una o dos devoluciones de llamada. El primero funcionará si el elemento existe, el segundo funcionará si el elemento no existe. Sin embargo, si decide transferir solo una función, solo funcionará si hay un elemento. Por lo tanto, la cadena morirá si el elemento seleccionado no existe. Por supuesto, si existe, la primera función funcionará y la cadena continuará.

Tenga en cuenta que usar la opción de devolución de llamada ayuda a mantener la cadena : se devuelve el elemento, ¡y puede continuar los comandos de cadena como cualquier otro método jQuery!

Ejemplo de uso

 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 нояб. La respuesta se da SpYk3HH 09 Nov. 2012-11-09 20:47 '12 a las 8:47 pm 2012-11-09 20:47

Veo que la mayoría de las respuestas aquí no son tan precisas como deberían, verifican la longitud del elemento, en muchos casos puede ser normal , pero no al 100%, imagina que se pasa un número en lugar de una función, así que creo un prototipo de función que comprueba todas las condiciones y devuelve la respuesta como debe ser:

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

Esto verificará la longitud y el tipo, ahora puede verificarlo de la siguiente manera:

 $(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 La respuesta es dada por Alireza el 20 de mayo de '17 a las 12:21 2017-05-05 12:21

No se necesita jQuery. Con JavaScript simple, es más fácil y semánticamente correcto verificar:

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

Si por alguna razón no desea especificar un identificador de elemento, aún puede usar cualquier otro método de JavaScript destinado a acceder al DOM.

jQuery es realmente genial, pero no dejes que JavaScript puro olvide ...

47
14 нояб. La respuesta se da amypellegrini 14 nov. 2011-11-14 17:20 '11 a las 17:20 2011-11-14 17:20

Puedes usar esto:

 jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){} 
42
01 июня '13 в 10:20 2013-06-01 10:20 la respuesta se da Amitābha 01 junio '13 a las 10:20 2013-06-01 10:20

La razón por la que todas las respuestas anteriores requieren el parámetro .length es que usan principalmente el selector jquery $() , que tiene una solicitud SelectorAll detrás de las cortinas (o las usan directamente). Este método es bastante lento porque necesita analizar todo el árbol DOM, buscar todas las coincidencias con este selector y rellenarlas con una matriz.

El parámetro ['length'] no es necesario ni útil, y el código será mucho más rápido si usa document.querySelector(selector) lugar de él, porque devuelve el primer elemento que coincide, o nulo si no se encuentra.

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

Sin embargo, este método nos deja con el objeto de retorno real; lo cual está bien si no se guarda como una variable y se reutiliza (guardando así el enlace si lo olvidamos).

 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;  

En algunos casos esto puede ser necesario. Se puede utilizar en un bucle for de la siguiente manera:

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

Si realmente no necesita un elemento y desea obtener / guardar solo true / false, ¡no doble! Él trabaja en zapatos que están desatados, así que ¿por qué está aquí?

 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 авг. Respuesta dada por Technosaurus 12 de agosto. 2014-08-12 02:42 '14 a las 2:42 2014-08-12 02:42

Encontré que if ($(selector).length) {} no if ($(selector).length) {} suficiente. Deshabilitará su aplicación cuando el selector sea ​​un objeto {} vacío.

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

Mi única sugerencia es realizar una verificación adicional para {} .

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

Todavía estoy buscando una mejor solución, aunque es un poco difícil.

Edición: ¡ADVERTENCIA! Esto no funciona en IE si el selector es una cadena.

 $.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE 
32
06 февр. La respuesta se da Oleg 06 Feb. 2012-02-06 23:37 '12 a las 11:37 pm 2012-02-06 23:37

Puede verificar que el elemento esté presente o no utilizando la longitud en el script java. Si la longitud es mayor que cero, entonces el elemento está presente, si la longitud es cero, entonces no hay ningún elemento

 // 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 da la respuesta el 9 de julio de 2015 a las 15:39 2015-07-09 15:39

Es $.contains() lo que quieres?

jQuery.contains( container, contained )

El $.contains() devuelve true si el elemento DOM proporcionado por el segundo argumento es un descendiente del elemento DOM proporcionado por el primer argumento, ya sea un descendiente directo o un anidado más profundamente. De lo contrario, devuelve falso. Solo se admiten nodos de elementos; si el segundo argumento es un nodo de texto o comentario, $.contains() devolverá false.

Nota El primer argumento debe ser un elemento DOM, no un objeto jQuery o un objeto JavaScript normal.

30
23 окт. Hiway fue publicado el 23 de octubre 2013-10-23 08:46 '13 a las 8:46 2013-10-23 08:46

Verifique que la disponibilidad del artículo se capture en el sitio web oficial de jQuery

Use la propiedad length de la colección jQuery devuelta por su selector:

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

Tenga en cuenta que no siempre es necesario verificar si existe un elemento. El siguiente código mostrará el elemento si existe y no hará nada (sin errores) si no lo está:

 $("#myDiv").show(); 
26
22 марта '17 в 17:32 2017-03-22 17:32 La respuesta la da Tilak Maddy el 22 de marzo de 17 a las 17:32 2017-03-22 17:32

Esto es muy similar a todas las respuestas, pero ¿por qué no usar el operador ! dos veces para que pueda obtener un valor booleano:

 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 La respuesta es de Santiago Hernández el 4 de mayo de '15 a las 6:31 AM de 2015-05-04 06:31
 $(selector).length  //Do something 
25
28 мая '12 в 15:58 2012-05-28 15:58 SJG da la respuesta el 28 de mayo de '12 a las 15:58 2012-05-28 15:58

Prueba la prueba de elementos DOM .

 if (!!$(selector)[0]) // do stuff 
23
09 авг. la respuesta es dada por guest271314 09 ago. 2015-08-09 05:55 '15 a las 5:55 2015-08-09 05:55

Inspirado por la respuesta de la autopista, se me ocurrió lo siguiente:

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

jQuery.contains toma dos elementos DOM y comprueba si el primero contiene uno.

Use document.documentElement , ya que el primer argumento realiza la semántica del método exists cuando queremos aplicarlo exclusivamente para verificar la existencia de un elemento en el documento actual.

A continuación, jQuery.exists() un fragmento que compara jQuery.exists() con $(sel)[0] y $(sel).length , que devuelven valores de truthy para $(4) , y $(4).exists() devuelve false . En el contexto de la verificación de la existencia de un elemento en el DOM, este parece ser el resultado deseado .

 td { border: 1px solid black } 
22
13 окт. Responder Oliver 13 oct. 2015-10-13 23:01 '15 a las 11:01 pm 2015-10-13 23:01

Simplemente me gusta usar javascript de vainilla para esto.

 function isExists(selector){ return document.querySelectorAll(selector).length>0; } 
20
19 июня '16 в 1:37 2016-06-19 01:37 Sanu Uthaiah Bollera recibe la respuesta el 19 de junio de 2016 a las 1:37 2016-06-19 01:37

Me encontré con esta pregunta y me gustaría compartir un fragmento de código que actualmente utilizo:

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

Y ahora puedo escribir tal código ...

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

Esto puede parecer mucho código, pero al escribir en CoffeeScript, esto es bastante:

 $.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 la respuesta se da Eternal1 28 de julio de 2014 a las 13:50 2014-07-28 13:50

No se necesita jQuery

 if(document.querySelector('.a-class')) { // do something } 
18
28 нояб. La respuesta la da Pawel el 28 de noviembre. 2016-11-28 13:43 '16 a las 1:43 pm 2016-11-28 13:43

Tuve un caso en el que quería ver si un objeto existe dentro de otro, así que agregué algo a la primera respuesta para verificar el selector dentro del selector.

 // 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 апр. respuesta dada por jcreamer898 06 de abril 2012-04-06 00:02 '12 a las 0:02 2012-04-06 00:02

¿Qué tal

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

Esto es mínimo y ahorra tiempo cuando necesita ingresar el selector $() cada vez.

16
05 марта '14 в 0:15 2014-03-05 00:15 la respuesta se da GSTAR 05 de marzo de 2014 a las 0:15 2014-03-05 00:15

Yo uso esto:

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

Ejecute la cadena solo si hay un elemento jQuery - http://jsfiddle.net/andres_314/vbNM3/2/

12
02 авг. Se da la respuesta andy_314 02 ago. 2012-08-02 00:56 '12 a las 0:56 2012-08-02 00:56

Aquí está mi método favorito en jQuery.

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

y otra versión que admite devolución de llamada cuando el selector no existe

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

Ejemplo:

 $('#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 dio la respuesta el 8 de marzo de 2016 a las 20:06 2016-03-08 20:06

$("selector" ) devuelve un objeto que tiene la propiedad length . Si el selector encuentra algún elemento, se incluirán en el objeto. Por lo tanto, si verifica su longitud, verá si hay algún elemento. En javascript 0 == false , por lo tanto, si no obtiene 0 su código funcionará.

 if($("selector").length){ //code in the case } 
11
25 марта '16 в 14:05 2016-03-25 14:05 Kamuran Sönecek da la respuesta el 25 de marzo de 2016 a las 14:05 2016-03-25 14:05

No necesita verificar si este 0 suficiente como $(selector).length > 0 , $(selector).length y una manera elegante de verificar la existencia de elementos. No creo que valga la pena escribir una función solo para esto, si quieres hacer más cosas adicionales, sí.

 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 dio la respuesta el 20 de junio de 2017 a las 12:43 2017-06-20 12:43
 if ( $('#myDiv').size() > 0 ) { //do something } 

size() cuenta el número de elementos devueltos por el selector.

8
25 февр. La respuesta se da Mad_Hat 25 de febrero. 2009-02-25 05:44 '09 a las 5:44 am 2009-02-25 05:44
  • 1
  • 2

Otras preguntas sobre tags o Haz una pregunta