jQuery append () - retorna elementos anexados

188

Estou usando o jQuery.append () para adicionar alguns elementos dinamicamente. Existe alguma maneira de obter uma coleção ou matriz jQuery desses elementos recém-inseridos?

Então, eu quero fazer isso:

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

jquery

— psychotik
fonte

4

possível duplicata de maneira mais fácil para obter um objeto jQuery do elemento anexado

— azulada

263

Existe uma maneira mais simples de fazer isso:

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

Isso muda tudo, primeiro criando newHtmlcom jQuery(html [, ownerDocument ])e, em seguida, usando appendTo(target)(observe o Tobit " ") para adicioná-lo ao final de #mydiv.

Porque agora você começa com $(newHtml)o resultado final de appendTo('#myDiv')é esse novo bit de html, e a .effects(...)chamada também será nesse novo bit de html.

— SLaks
fonte

2

O uso do jQuery UI versão 1.9.2 que estou recebendo effectsnão é uma função ... mas effecté

— Philipp

Eu acrescentaria que também há outra assinatura: appendTo (destino, contexto). Como em qualquer seletor jQuery, ele permite procurar o destino, mas apenas dentro de um contexto específico. Pode ser muito útil se você escrever plugins ou bibliotecas.

— Pierpaolo Cira

1

Isso gerará um erro se newHtmlnão for HTML válido ou um seletor jQuery válido: $('/ This is Not HTML /').appendTo('#myDiv')resulta em Uncaught Error: Syntax error, unrecognized expressionenquanto $('#myDiv').append('/ This is Not HTML /')funciona corretamente, acrescentando texto ao elemento de destino.

— Thomas CG de Vilhena

40

// 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
fonte

2

Isso não funcionou para mim quando mais tarde tentei vincular um evento ao elemento anexado. Eu usei var appendedTarget = $ (newHtml) .appendTo (elemento). Eu, então, poderia vincular usando $ (appendedTarget) .bind ( 'keydown', somefunc)

— Zac Imboden

Eu acho que é $elements.effect("highlight", {}, 2000);, não effects.

— por que

2

Isso não funciona porque a variável $ elements após ser anexada muda e não está mais disponível.

— Alex V

@AlexV Isso parece funcionar, veja a demonstração ao vivo em jsbin.com/xivedohofi/1/edit?html,js,output , também veja a mesma resposta que a da pergunta semelhante stackoverflow.com/questions/1443233/…

— Adrien Be

2

Parece que eles corrigiram isso nas versões mais recentes do jQuery.

— Alex V

30

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

— Thiago Belem
fonte

10

Um pequeno lembrete , quando os elementos são adicionados dinamicamente, funções como append(), appendTo(), prepend()ou prependTo()retornar um objeto jQuery, não o 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]"

— AgelessEssence
fonte

19

O elemento retornado de append () é o contêiner e não o novo elemento.

— Tomas

0

Eu acho que você poderia fazer algo assim:

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

O pai #parentId é retornado do anexo, portanto, adicione uma consulta filho jquery a ele para obter o último filho div inserido.

$ child é então o div filho derivado de jquery que foi adicionado.

— aff
fonte