jQuery: ¿Es posible asignar un elemento DOM a una variable para su uso posterior?

Question

Estoy trabajando en un proyecto que está usando jQuery, que estoy mucho más familiarizado con Mootools.

Comenzaré con mi código primero.

var customNamespace = { 
    status: 'closed', 
    popup: $('#popup'), 

    showPopup: function() { 
     // ... 
    } 
} 

$(document).ready(function(){ 
    console.log($('#popup')); 
    console.log(customNamespace.popup); 
    console.log($(customNamespace.popup)); 

    $('#popup').fadeIn('slow'); 
    (customNamespace.popup).fadeIn('slow'); 
    $(customNamespace.popup).fadeIn('slow'); 
}); 

Mi objetivo es no tener jQuery atravesar el DOM cada vez que quiero hacer algo con el div #popup, así que quería guardarlo en una variable a utilizar a lo largo de mi guión.

Cuando se carga la página, la consola imprime el objeto 3 veces como era de esperar, así que asumí que para cada método, el fadeIn simplemente funcionaría. Pero no es así, solo

$('#popup').fadeIn('slow'); 

En realidad se desvanece en el div.

Incluso si quito mi hash de espacio de nombres, y simplemente guardar el objeto en una variable global, y hacer un

var globalVariable = $('#popup'); 
. 
. 
. 
globalVariable.fadeIn('slow'); 

también no funciona como pensé que lo haría. ¿Puede jQuery hacer lo que estoy tratando de hacer?

Answer 1

¿Dónde asignas las variables globales?

Si está fuera de la declaración document.ready, entonces bien puede estar asignando algo que no se ha cargado.

Prueba esto:

$(document).ready(function(){ 
    var customNamespace = { 
     status: 'closed', 
     popup: $('#popup'), 

     showPopup: function() { 
      // ... 
     } 
    } 
    console.log($('#popup')); 
    console.log(customNamespace.popup); 
    console.log($(customNamespace.popup)); 

    $('#popup').fadeIn('slow'); 
    (customNamespace.popup).fadeIn('slow'); 
    $(customNamespace.popup).fadeIn('slow'); 
}); 

lo que sucede cuando se intenta dar salida .length? :

console.log($('#popup').length); 
console.log(customNamespace.popup.length); 
console.log($(customNamespace.popup.length)); 

Answer 2

Claro, eso funciona. En realidad, es algo bueno mejorar el rendimiento.

Answer 3

Usted desea tener cuidado de que el DOM se carga realmente antes de ejecutar el selector y la asigna a la variable, pero por lo demás se puede almacenar una referencia a un elemento DOM en una variable sin problemas.

var globalVariable; 

$(document).ready(function(){ 
    globalVariable = $('#popup'); 
    console.log($('#popup')); 
    console.log(globalVariable); 

    $('#popup').fadeIn('slow'); 
    globalVariable.fadeIn('slow'); 
}); 

Answer 4

Todo lo que obtienes desde $() siempre será un objeto. Su problema es que cuando se asigna customNamespace y se ejecuta el código, el elemento DOM #popup aún no existe, y como tal, terminará con un objeto de longitud cero en ese ejemplo.

Para comprobar si ha encontrado un objeto en jQuery, no verifica el resultado para nulo, verifique su longitud.

para asegurarse de que existen los nodos DOM cuando se ejecuta el código, aplazar a domready: método de datos

$(document).ready(function() { 
    ... 
}); 

Answer 5

uso y evitar el almacenamiento de datos dentro del DOM. Algunos desarrolladores tienen la costumbre de almacenar datos en el HTML atributos como fx .:

$('selector').attr('alt', 'data being stored'); 

// después, los datos pueden ser recuperados usando: $ ('selector').attr ('alt');

Los atributos de HTML no están destinados a almacenar datos como ese y la "alt" como nombre de parámetro realmente no tiene sentido. La alternativa correcta en la mayoría de los casos es usar el método de datos en jQuery. Le permite asociar datos con un elemento en la página.

$('selector').data('paramtername', 'data being stored'); 

// luego obtener los datos con $ ('selector') de datos ('paramtername.');

Este enfoque le permite almacenar datos con nombres significativos y es más flexible ya que puede almacenar tantos datos como desee en cualquier elemento de la página. Para obtener más información sobre data() y removeData(), consulte aquí jQuery internals. Un uso clásico de esto es guardar el valor predeterminado de un campo de entrada porque desea borrarlo del enfoque.

 <form id="testform"> 
<input type="text" class="clear" value="Always cleared" /> 
<input type="text" class="clear once" value="Cleared only once" /> 
<input type="text" value="Normal text" /> 
</form> 

$(function() { 
//Go through every input field with clear class using each function 
//(NB! "clear once" is two classes clear and once) 
$('#testform input.clear').each(function(){ 
    //use the data function to save the data 
    $(this).data("txt", $.trim($(this).val())); 
}).focus(function(){ 
    // On focus test for default saved value and if not the same clear it 
    if ($.trim($(this).val()) === $(this).data("txt")) { 
    $(this).val(""); 
    } 
}).blur(function(){ 
    // Use blur event to reset default value in field that have class clear 
    // but ignore if class once is present 
    if ($.trim($(this).val()) === "" && !$(this).hasClass("once")) { 
    //Restore saved data 
    $(this).val($(this).data("txt")); 
    } 
}); 
}); 

demo aquí: link text

Answer 6

me gusta estructurar mi guión similar a este. Para mí mantiene todos mis controles de página juntos. También me permite mantener mis scripts más fácilmente para cada página.

/* CONTROLS GLOBAL */ 
var Controls; 


var Class = { 
    create: function() { 
     return function() { 
      this.initialize.apply(this, arguments); 
     } 
    } 
} 

//Set up page control objects 
PageControls = Class.create(); 
PageControls.prototype = { 
    initialize: function() { 

     //Use jquery to initialize our controls, 
     //one should probably use more appropriate names other than ctrl1, ctrl2 .. 
     //but for demo purposes ... 
     this.ctrl1 = $($("#Control1")); 
     this.ctrl2 = $($("#Control2")); 
     this.ctrl3 = $($("#Control3")); 

    } 
} 

Una vez listo ...

$(document).ready(function() { 

    /* Initialize our global page controls */ 
    Controls = new PageControls(); 

    //Now we can use our controls 
    Controls.ctrl1.val("Text for control 1"); 
    Controls.ctrl2.val("Text for control 2"); 
    Controls.ctrl3.val("Text for control 3"); 
});