2010-02-28 13 views
26

Ok, así que básicamente tengo que comprobar, si en mi menú #Container existen elementos de tercer nivel (h3 para ser exactos) y si es así darles algún atributo. Si no, dale este atributo al elemento de segundo nivel (h2) que siempre existe. Es:jQuery - comprobación de existencia de elementos

if ($('h3')) { 
    //some attribute 
} else { 
//some attribute 
}; 

el método correcto?

Respuesta

45

Uso .length para ello, se dice 0/falso si no hay ninguna coincidencia:

if ($('h3').length) { 
//some attribute 
} else { 
//some attribute 
}; 

Versión corta, menos legible:

$($('h3').length ? 'h3' : 'h2').addClass("bob"); 
1

comprueba la longitud del objeto jQuery devuelto

if ($('h3').length != 0)) { 
    $('h3').attr(...); 
} 
else { 
    $('h2').attr(...); 
} 
3

.....

if ($('#Container h3').length) { 
    //some attribute 
} else { 
//some attribute 
}; 
1

Para que sea más fácil de leer, que ofrecen este truco:

var h3ElementsExist = $('h3').length 
if (h3ElementsExist) { 
    //some attribute 
} else { 
//some attribute 
}; 
1

me he dado cuenta de una respuesta que me envió a esta función una forma sencilla de añadir un plugin de jQuery para esto se suprimió hace mucho tiempo. ¿Por qué? No lo sé. En conclusión, ele.length es simple, pero no muy elegante cuando se consideran los defectos fundamentales. No mantiene el marcado de estilo jQuery que podría dañar la legibilidad, así como forzar esto en una declaración "if" cuando esto realmente "aparece" como algo que jQuery debe manejar "naturalmente". Por lo tanto, lo hace. Si todo lo que hace busca aplicar un "atributo" a un elemento existir, puede simplemente hacer la llamada, sin ninguna declaración if. Si el elemento existe, obtendrá el nuevo atributo. Si no existe, no dañará nada ni hará nada más que continuar.

Por ejemplo:

$('#Container h3').css('background', 'red'); 

Esto hará que cualquier H3 etiquetas existentes dentro de un elemento identificó como Container tienen un fondo red, si es que existen. Si no existen, este código, esencialmente, será ignorado. Sin embargo, si desea hacer más, y mantener jQuery "chainable", así como mantener el marcado de estilo de jQuery, entonces sugeriría un complemento que escribí que agrega $.exist() a jQuery.

Permite una variedad de formas de llamar con un parámetro para devoluciones de llamada también. En pocas palabras, puede usarlo en una declaración if como if ($('h3').exist() { o puede crear un 1 a 2 métodos de devolución de llamada. Los métodos de devolución de llamada son puros y simples. Si solo se proporciona 1, (o simplemente el primer método de devolución de llamada) es el "existe" método de devolución de llamada. En otras palabras, si el elemento existe, se disparará y luego devolverá el elemento (s) manteniendo así jQuery "chainable". Sin embargo, si no existe, no pasará nada, a menos que haya un segundo método de devolución de llamada.Luego disparará su segundo método de devolución de llamada, al igual que el "else" de la declaración if mencionada anteriormente.

Algunos ejemplos aquí:

$('#Container h3').exist(function(boolTrue, elements, indexPerEach) { /* DO WORK */ }); 

de 2 devoluciones de llamada

$('#Container h3').exist(function(boolTrue, elements, indexPerEach) { /* DO WORK */ }, 
function(boolFalse, elements) { /* Elements did NOT EXIST - DO WORK */ }); 

Ver más ejemplo y obtener la versión miniaturizada del complemento HERE

/*---PULIGIN---*/ 
;;(function($){$.exist||($.extend({exist:function(){var a,c,d;if(arguments.length)for(x in arguments)switch(typeof arguments[x]){case "function":"undefined"==typeof c?c=arguments[x]:d=arguments[x];break;case "object":if(arguments[x]instanceof jQuery)a=arguments[x];else{var b=arguments[x];for(y in b)"function"==typeof b[y]&&("undefined"==typeof c?c=b[y]:d=b[y]),"object"==typeof b[y]&&b[y]instanceof jQuery&&(a=b[y]),"string"==typeof b[y]&&(a=$(b[y]))}break;case "string":a=$(arguments[x])}if("function"==typeof c){var e=0<a.length?!0:!1;if(e)return a.each(function(b){c.apply(this,[e,a,b])});if("function"==typeof d)return d.apply(a,[e,a]),a}return 1>=a.length?0<a.length?!0:!1:a.length}}),$.fn.extend({exist:function(){var a=[$(this)];if(arguments.length)for(x in arguments)a.push(arguments[x]);return $.exist.apply($,a)}}))})(jQuery); 
/*---PULIGIN---*/ 

Ver más información publicada al respecto en otra respuesta HERE

0

Comprobar el tamaño o la longitud del objeto jQuery vuelto

if ($('h3').size() != 0)) { 
    $('h3').attr(...); 
} 
else { 
    $('h2').attr(...); 
} 

o

if ($('h3').length != 0)) { 
    $('h3').attr(...); 
} 
else { 
    $('h2').attr(...); 
} 
Cuestiones relacionadas