javascript - ejemplos - jquery first child
Tienda jquery selector en variable (2)
Creo que la respuesta aceptada es excelente, pero podría interpretarse como una sugerencia de que asignar objetos JQuery a variables siempre es inseguro. Hacerlo está bien, siempre y cuando el objeto DOM las referencias de la variable no se alteren antes de acceder a él de una manera que afecte el código posterior .
HTML
<div id="banner-message">
<p>Hello World</p>
<button>Change view</button>
</div>
JavaScript
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.addClass("alt");
banner.hide().html("New HTML").fadeIn(2000);
})
En el siguiente ejemplo, el stored jQuery selector devuelve el valor incorrecto. ¿Existe la posibilidad de almacenar los selectores y no el resultado?
El código js:
// storing the jQuery selectors
var
$container = $( ''.container'' ),
$element1 = $container.find( ''.element'' ),
$element2 = $( ''.element'', $container ),
$element3 = $( ''.element'' );
// append elements to the container
for( i=0; i<10; ++i ){
$container.append( $(element_html) );
}
// try the stored selectors -> returns 0
console.log( "1: " + $element1.length );
console.log( "2: " + $element2.length );
console.log( "3: " + $element3.length );
¿Por qué, si uso los selectores de contenedores para encontrar los elementos, funciona? ¿Se debe a que el selector devuelve el pointer a los elementos coincidentes y no a los elementos?
// this works
console.log( "1: " + $container.find( ''.element'' ).length );
console.log( "2: " + $( ''.element'', $container ) .length );
console.log( "3: " + $( ''.element'' ) .length );
Tienes un malentendido fundamental de lo que
variableName = $("selector here");
hace. No "almacena el selector". Ejecuta el selector que le das contra los elementos actuales en el DOM, crea un objeto jQuery, coloca los elementos coincidentes en el objeto jQuery y le da una referencia a ese objeto jQuery. El selector no está almacenado (modulo jQuery internals).
Entonces dado:
<body>
<div class="foo">x</div>
</body>
Entonces:
var $divs = $("div.foo");
console.log($divs.length); // 1
Nos da esto:
Si luego agregamos otro div coincidente:
$(''<div class="foo"></div>'').appendTo(document.body);
Nuestros $divs solo apuntan al primero; agregar otro elemento coincidente al DOM no tuvo efecto en el objeto jQuery al que se hace referencia desde $divs .
Si volvemos a ejecutar la consulta en ese punto:
$divs = $("div.foo");
...entonces nosotros tenemos:
Si tiene un objeto jQuery que contiene un elemento DOM y agrega elementos descendientes a ese elemento DOM, entonces, al usar ese objeto jQuery con (por ejemplo) .find verá los descendientes. Esto se debe a que el elemento DOM principal ya está allí en el objeto jQuery. Por ejemplo, agregando un span a uno de los div s que ya hacemos referencia desde nuestro objeto jQuery:
Si tuviéramos que usar .find en $divs en ese punto buscando un span , lo encontraríamos, porque es un descendiente de uno de los elementos a los que ya teníamos una referencia.
Si desea volver a ejecutar la búsqueda de DOM más tarde para buscar elementos coincidentes, simplemente use $() nuevo; esto está implícito en lo anterior, pero para mayor claridad:
var $divs = $("div.foo");
console.log($divs.length); // 1
$(''<div class="foo"></div>'').appendTo(document.body);
console.log($divs.length); // Still 1
$divs = $("div.foo");
console.log($divs.length); // Now it''s 2
Por lo tanto, "almacenar un selector", cuando sea necesario, es cuestión de almacenar la cadena del selector en algún lugar, no el objeto jQuery.