2010-01-29 107 views
161

我使用jQuery.append()来动态添加一些元素。有没有什么办法来获得这些新插入的元素的jQuery集合或数组?jQuery append() - 返回附加元素

所以我想这样做:

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

[更简单的方法从附加元素获取jQuery对象](http://stackoverflow.com/questions/1443233/easier-way-to-get-a-jquery-object-from-appended-element ) – bluish 2013-06-10 13:03:36

回答

225

有做这个简单的方法:

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

这首先与jQuery(html [, ownerDocument ])创建newHtml,然后使用appendTo(target)各地轮流东西(注“To”位)将其添加到#mydiv的末尾。

因为你现在$(newHtml)开始appendTo('#myDiv')的最终结果是HTML的新位,而.effects(...)通话将上一些HTML太多。

+3

我想我实际上使用'appendTo'和'prependTo'远远超过我使用'append'和'prepend'。 – 2010-01-29 01:53:18

+2

使用jQuery UI版本1.9.2我得到'效果'不是一个函数......但'效果'是 – 2013-03-01 08:57:17

+0

工程真棒动态添加元素通过AJAX和附加.data()他们:D – 2014-06-21 17:46:53

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

当我以后尝试将事件绑定到附加元素时,这并不适用于我。我用var appendTarget = $(newHtml).appendTo(element)。我可以用$(attachedTarget).bind('keydown',someFunc)来绑定 – 2012-06-22 19:12:55

+0

我认为它是'$ elements.effect(“highlight”,{},2000);',而不是'effects'。 – why 2013-03-27 12:44:03

+2

这不起作用,因为追加后的$ elements变量发生变化并且不再可用。 – 2014-01-07 20:26:55

8

小提醒,当元件被动态添加,函数等append()appendTo()prepend()prependTo()返回一个jQuery对象,而不是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

append()中的返回元素是容器而不是新元素。 – Tomas 2014-09-22 13:45:19

0

我想你可以做这样的事情:

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

父#parentId从追加回来,所以加一个jQuery儿童查询它来获取最后div插入的孩子。

$ child是添加的jquery包装的子div。