jQuery append () - restituisce elementi aggiunti

188

Sto usando jQuery.append () per aggiungere alcuni elementi in modo dinamico. Esiste un modo per ottenere una raccolta jQuery o una matrice di questi elementi appena inseriti?

Quindi voglio fare questo:

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

jquery

— psychotik
fonte

4

possibile duplicato del modo più semplice per ottenere un oggetto jQuery dall'elemento aggiunto

— bluastro

263

C'è un modo più semplice per farlo:

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

Questo cambia le cose creando prima newHtmlcon jQuery(html [, ownerDocument ]), e poi usando appendTo(target)(nota il " To" bit) per aggiungerlo alla fine di #mydiv.

Perché ora inizi con $(newHtml)il risultato finale di appendTo('#myDiv')è quel nuovo bit di HTML e anche la .effects(...)chiamata sarà su quel nuovo bit di HTML.

— SLaks
fonte

2

Utilizzando JQuery UI versione 1.9.2 sto ottenendo effectsnon è una funzione ... ma effectè

— Philipp M

Vorrei aggiungere che esiste anche un'altra firma: appendTo (target, contesto). Come per qualsiasi selettore jQuery che consente di cercare target, MA solo all'interno di un contesto specifico. Può essere molto utile se scrivi plugin o librerie.

— Pierpaolo Cira,

1

Questo genera un errore se newHtmlnon è valido HTML o un selettore jQuery valida: $('/ This is Not HTML /').appendTo('#myDiv')risultati nel Uncaught Error: Syntax error, unrecognized expressionmentre $('#myDiv').append('/ This is Not HTML /')funziona correttamente aggiungendo testo per l'elemento di destinazione.

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

2

Questo non ha funzionato per me quando in seguito ho provato a associare un evento all'elemento allegato. Ho usato var appendedTarget = $ (newHtml) .appendTo (element). Potrei quindi associare utilizzando $ (appendedTarget) .bind ('keydown', someFunc)

— Zac Imboden,

Penso di si $elements.effect("highlight", {}, 2000);, no effects.

— perché il

2

Questo non funziona perché la variabile $ elements dopo essere stata aggiunta, cambia e non è più disponibile.

— Alex V,

@AlexV Questo sembra funzionare, vedi la demo live su jsbin.com/xivedohofi/1/edit?html,js,output , vedi anche la stessa risposta accettata per la domanda simile stackoverflow.com/questions/1443233/…

— Adrien Be

2

Sembra che lo abbiano risolto nelle versioni più recenti di jQuery.

— Alex V,

30

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

— Thiago Belem
fonte

10

Un piccolo promemoria , quando gli elementi vengono aggiunti dinamicamente, funzioni come append(), appendTo(), prepend()o prependTo()restituire un oggetto jQuery, non l'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

L'elemento restituito da append () è il contenitore e non il nuovo elemento.

— Tomas,

0

Penso che potresti fare qualcosa del genere:

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

Il parent #parentId viene restituito dall'appendice, quindi aggiungi una query jquery children ad esso per ottenere l'ultimo figlio div inserito.

$ child è quindi il div figlio jquery che è stato aggiunto.

— aff
fonte