2010-01-29 16 views
161

Estoy usando jQuery.append() para agregar algunos elementos dinámicamente. ¿Hay alguna manera de obtener una colección jQuery o una matriz de estos elementos recién insertados?jQuery append() - devolver elementos añadidos

por lo que quiero hacer esto:

$("#myDiv").append(newHtml); 
var newElementsAppended = // answer to the question I'm asking 
newElementsAppended.effects("highlight", {}, 2000); 
+3

posible duplicado de [Forma más fácil de obtener un objeto jQuery del elemento adjunto] (http://stackoverflow.com/questions/1443233/easier-way-to-get-a-jquery-object-from-appended-element) – bluish

Respuesta

225

Hay una manera más sencilla de hacer esto:

$(newHtml).appendTo('#myDiv').effects(...); 

Esto convierte a las cosas por primera vez la creación de newHtml con jQuery(html [, ownerDocument ]), y luego usando appendTo(target) (nota el bit "To") para agregarlo al final de #mydiv.

, ya que ahora empezar con $(newHtml) el resultado final de appendTo('#myDiv') es que los nuevos poco de html, y la llamada .effects(...) estarán en esa nueva poco de HTML también.

+3

Creo que realmente uso 'appendTo' y' prependTo' mucho más de lo que he usado 'append' y' prepend'. –

+2

Usando jQuery UI versión 1.9.2 Estoy obteniendo 'effects' no es una función ... pero' effect' es –

+0

funciona increíble para agregar elementos dinámicamente a través de AJAX y adjuntar .data() a ellos: D –

24
var newElementsAppended = $(newHtml).appendTo("#myDiv"); 
newElementsAppended.effects("highlight", {}, 2000); 
36
// wrap it in jQuery, now it's a collection 
var $elements = $(someHTML); 

// append to the DOM 
$("#myDiv").append($elements); 

// do stuff, using the initial reference 
$elements.effects("highlight", {}, 2000); 
+2

Esto no funcionó para mí cuando más tarde intenté vincular un evento al elemento adjunto. Utilicé var appendedTarget = $ (newHtml) .appendTo (element). Podría enlazar usando $ (appendedTarget) .bind ('keydown', someFunc) –

+0

Creo que es '$ elementos.efecto (" resaltar ", {}, 2000);', no 'efectos'. – why

+2

Esto no funciona porque la variable $ elements después de ser anexada, cambia y ya no está disponible. –

8

Un pequeño recordatorio, cuando se añaden elementos dinámicamente, funciona como append(), appendTo(), prepend() o prependTo() devuelven un objeto jQuery, no el elemento HTML DOM.

DEMO

var container=$("div.container").get(0), 
    htmlA="<div class=children>A</div>", 
    htmlB="<div class=children>B</div>"; 

// jQuery object 
alert($(container).append(htmlA)); // outputs "[object Object]" 

// HTML DOM element 
alert($(container).append(htmlB).get(0)); // outputs "[object HTMLDivElement]" 
+15

El elemento devuelto de append() es el contenedor y no el nuevo elemento. – Tomas

0

creo que se podría hacer algo como esto:

var $child = $("#parentId").append("<div></div>").children("div:last-child"); 

El #parentId matriz se devuelve desde el append, por lo que añadir una consulta hijos jquery a él para obtener la última div niño insertado.

$ child es entonces el div para niños envuelto en jquery que se agregó.

Cuestiones relacionadas