jQuery append () - повернення доданих елементів

188

Я використовую jQuery.append (), щоб динамічно додавати деякі елементи. Чи є спосіб отримати колекцію jQuery або масив цих щойно вставлених елементів?

Тому я хочу це зробити:

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

jquery

— психотик
джерело

4

можливий дублікат легшого способу отримати об’єкт jQuery з доданого елемента

— синюватого

263

Існує простіший спосіб зробити це:

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

Це обертає речі, спочатку створюючи за newHtmlдопомогою jQuery(html [, ownerDocument ]), а потім використовуючи appendTo(target)(зверніть увагу на " To" біт), щоб додати його до кінця #mydiv.

Оскільки тепер ви починаєте з $(newHtml)кінцевого результату appendTo('#myDiv')- це новий біт html, і .effects(...)дзвінок буде також на новому біті html.

— SLaks
джерело

2

Використання jQuery UI версії 1.9.2 Я отримую effectsне функцію ... але effectце

— Philipp M

Я додам, що є й інший підпис: appendTo (target, context). Такий, як для будь-якого селектора jQuery, він дозволяє шукати ціль, але лише в конкретному контексті. Це може бути дуже корисно, якщо ви пишете плагіни або бібліотеки.

— Pierpaolo Cira

1

Це призведе до помилки, якщо newHtmlнедійсний HTML або допустимий селектор jQuery: $('/ This is Not HTML /').appendTo('#myDiv')призводить до того Uncaught Error: Syntax error, unrecognized expression, що він $('#myDiv').append('/ This is Not HTML /')працює належним чином, додаючи текст до цільового елемента.

— Thomas CG de Vilhena

41

// 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);

— karim79
джерело

2

Це не спрацювало для мене, коли я пізніше спробував прив’язати подію до доданого елемента. Я використовував var appendedTarget = $ (newHtml) .appendTo (елемент). Тоді я міг би прив’язати за допомогою $ (доданийTarget) .bind ('keydown', someFunc)

— Zac Imboden

Я думаю, що так $elements.effect("highlight", {}, 2000);, ні effects.

— чому

2

Це не працює, тому що змінна $ елементи після додавання, змінюється і більше не доступна.

— Олексій V

@AlexV Це, здається, працює, див. Демо-версію на jsbin.com/xivedohofi/1/edit?html,js,output , також бачиш ту саму відповідь, яку прийнято на аналогічне запитання stackoverflow.com/questions/1443233/…

— Adrien Be

2

Здається, вони виправили це в новіших версіях jQuery.

— Алекс V

30

var newElementsAppended = $(newHtml).appendTo("#myDiv");
newElementsAppended.effects("highlight", {}, 2000);

— Тіаго Белем
джерело

10

Невелике нагадування , коли елементи додаються динамічно, такі функції , як 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]"

— Безстарінність
джерело

19

Повернений елемент з append () є контейнером, а не новим елементом.

— Томаш

0

Я думаю, ви могли б зробити щось подібне:

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

Батьківський #parentId повертається з додатку, тому додайте до нього запит дітей jquery, щоб вставити останню дочірню діть.

$ child - це доданий до дівочого загортання jquery, який було додано.

— афі
джерело