¿Existe una forma elegante de seleccionar un elemento en JQuery si no existe otro?

Question

Supongamos que tengo el siguiente requisito: Agregue el elemento e al elemento con id "x" si dicho elemento existe, de lo contrario agregue e al cuerpo.

En DOM nivel 0, puedo escribir:

var parent = document.getElementById("x") || document.body; 
parent.appendChild(e); 

En jQuery, la siguiente no no trabajo:

var parent = $("#x") || $("body"); 
parent.append(e); 

porque si no hay ningún elemento con existe Identificación x, la primera disyunción devuelve el objeto jquery vacío, con es verdad, no falso, por lo que el append no hace nada. Yo puedo , sin embargo, escribo:

var parent = $("#x")[0] || $("body")[0]; 
parent.appendChild(e); 

pero esta solución es algo torpe, porque la indexación del objeto jQuery me lleva de nuevo a HTMLElements, por lo que debe utilizar en lugar de appendChildappend. Mientras esto funciona, me pregunto si esta mezcla de niveles es apropiada o indicativa de un mal diseño.

¿Hay alguna forma de usar first()? Tal vez podría crear un objeto jQuery que era esencialmente una matriz cuyo primer elemento era el div con id x, y el segundo era el cuerpo. Sé que puedo hacer esto con el formulario de constructor jQuery que toma una matriz de elementos, pero luego vuelvo a una mezcla de niveles. También sé cómo verificar la existencia de un elemento con id x ($("#x").length), pero no veo cómo esto llevará a una forma elegante de expresar "el elemento con id x si existe, sino el cuerpo".

¿Existe tal formulación?

Answer 1

En lugar de utilizar jQuery para seleccionar el elemento, se podría utilizar para envolver el nativa DOM llama:

$(document.getElementById("foo") || document.body) 

no es exactamente elegante (o en realidad ni siquiera usando jQuery), ni una técnica de aplicación universal, pero que va a terminar con algo que se puede anexar a (e incurrir en una invocación jQuery relativamente barato simplemente la una vez).

Usted no será capaz de utilizar first() - por ejemplo, $("#foo, body").first(); - debido a que el orden en el que se devuelve elementos seleccionados se basa en el fin de DOM, no selector fin (gracias, @muistooshort)

Answer 2

Honestamente, yo realmente no creo que esto es muy detallado:

var parent = $('#x'); 
if(parent.length == 0) parent = $('body'); 

Y su intención es también bastante clara. Incluso podría envolverlo en una función si este modismo aparece mucho.

Además, aquí es una forma ternaria que sólo dispara cada consulta una vez (aunque es una solución de compromiso sobre la legibilidad):

var parent = (x = $('#header')).length ? x : $('body');