2009-09-18 11 views
69

bekommen, ist es ein einfacher/schneller Weg, um das Element zu erhalten hinzugefügt mit jQuery anfügen:Einfacher kann ein jQuery-Objekt aus hängten Elemente

Wie die $ Selektoren Element erhalten:

$container.append('<div class="selectors"></div>'); 
var $selectors = $('.selectors', $container); 

Ich habe versucht, :

var $selectors = $container.append('<div class="selectors"></div>'); 

aber das macht $ Selektoren = $ Behälter

das ist der schnellste/b Vielleicht est Weg. Einfach überprüfen.

Antwort

138

Warum nicht einfach:

var el = $('<div class="selectors"></div>'); 
$container.append(el); 

?

Dann haben Sie Zugriff auf 'el'.

+2

Hm. Was passiert, wenn '$ container' in diesem Fall mehrere Elemente enthält? In meinem Fall möchte ich etwas an alle Instanzen anhängen, die einem Selektor entsprechen und eine Sammlung von erstellten Elementen erhalten. –

+1

Dies funktioniert nicht für mehrere Instanzen von '$ container' http://jsfiddle.net/onL028ty/. Verwenden Sie 'appendTo' Trick statt http://jsfiddle.net/6nmdh84e/ – ktutnik

56

Das ist mein Lieblings-Weg, es zu tun:

var $selectors = $('<div class="selectors"></div>').appendTo(container); 
+3

+1 - meins auch. Machen Sie alles, was Sie mit dem neu erstellten Element tun müssen, bevor Sie es an das DOM anhängen. –

5
$selectors = $('<div/>').addClass('selectors').appendTo($container); 
+1

Gute Info, danke. Es ist ein bisschen für mich im Vergleich zu den anderen Antworten etwas ausschweifend, aber ich frage mich, ob es bessere Leistung weise tut? Leistung ist kein Problem in meiner speziellen Situation, aber vielleicht für andere. – slolife

2

Sie können auch eine neue jQuery-Funktion erstellen, es zu tun:

jQuery.fn.addChild = function(html) 
{        
    var target = $(this[0])        
    var child = $(html);              
    child.appendTo(target);             
    return child;                
}; 

und dann verwenden, etwa so:

$('<ul>').addChild('<li>hi</li>'); 

natürlich, wenn Sie mehr als hinzufügen wollten ein Element:

var list = $('<ul>'); 
list.addChild('<li>item 1</li>'); 
list.addChild('<li>item 2</li>'); 

Der Vorteil Ansätze wie dieser ist, dass Sie später mehr auf die „addChild“ Funktion hinzufügen können, wenn Sie mögen. Beachten Sie, dass Sie für beide obigen Beispiele das Element zu dem Dokument hinzufügen müssen, so dass ein vollständiges Beispiel sein könnte:

+2

Ich denke, der letzte Teil dieser Antwort fügt nur Verwirrung hinzu; das Anhängen an das Dokument war nicht Teil der Frage. Sie könnten es wirklich einfach halten wie Cletus und den Leser sich vorstellen lassen, $ container ist ein UL. $ container.append ('

  • hi
  • '); Wie auch immer, großartig. Vielen Dank. –