jQuery append () - возвращает добавленные элементы

188

Я использую jQuery.append () для динамического добавления некоторых элементов. Есть ли способ получить коллекцию jQuery или массив этих недавно вставленных элементов?

Итак, я хочу сделать это:

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

jquery

— psychotik
источник

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, он позволяет искать цель, НО только внутри определенного контекста. Это может быть очень полезно, если вы пишете плагины или библиотеки.

— Пьерпаоло Сира,

1

Это выдаст ошибку , если newHtmlне является действительной HTML или действительный селектор JQuery: $('/ This is Not HTML /').appendTo('#myDiv')результаты в Uncaught Error: Syntax error, unrecognized expressionто время как $('#myDiv').append('/ This is Not HTML /')работает должным образом путем добавления текста к целевому элементу.

— Томас КГ де Вильена

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 (element). Затем я могу связать, используя $ (appendedTarget) .bind ('keydown', someFunc)

— Зак Имбоден

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

— почему

2

Это не работает, потому что переменная $ elements после добавления изменяется и больше не доступна.

— Алекс 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]"

— AgelessEssence
источник

19

Возвращаемый элемент из append () является контейнером, а не новым элементом.

— Томас

0

Я думаю, что вы могли бы сделать что-то вроде этого:

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

Родительский #parentId возвращается из дополнения, поэтому добавьте к нему запрос дочерних jquery, чтобы вставить последний дочерний элемент div.

$ child - это добавленный дочерний div в jquery.

— утвердительный
источник