Einfachere Möglichkeit, ein jQuery-Objekt aus dem angehängten Element abzurufen

81

Gibt es eine einfachere / schnellere Möglichkeit, das Element mithilfe des jQuery-Anhangs hinzuzufügen:

So erhalten Sie das $ selectors-Element:

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

Ich habe es versucht:

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

aber das macht $ selectors = $ container

Vielleicht ist das der schnellste / beste Weg. Ich überprüfe nur.

jquery css-selectors append

— Slolife
quelle

160

Warum nicht einfach:

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

?

Dann haben Sie Zugriff auf 'el'.

— Cletus
quelle

2

Hm. Was passiert, wenn $containerin diesem Fall mehrere Elemente vorhanden sind? In meinem Fall möchte ich an alle Instanzen, mit denen ein Selektor übereinstimmt, etwas anhängen und eine Sammlung erstellter Elemente erhalten.

— Rhys van der Waerden

2

Dies funktioniert nicht bei mehreren Instanzen von $container jsfiddle.net/onL028ty . Verwenden Sie appendTostattdessen Trick jsfiddle.net/6nmdh84e

— ktutnik

61

Dies ist meine Lieblingsmethode:

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

— Magnar
quelle

3

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

— Russ Cam

5

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

— Hobbs
quelle

1

Gute Infos, danke. Es ist ein wenig ausführlich für mich im Vergleich zu den anderen Antworten, aber ich frage mich, ob es in Bezug auf die Leistung besser ist? Leistung ist in meiner speziellen Situation kein Problem, aber vielleicht für andere.

— Slolife

2

Sie können dazu auch eine neue jQuery-Funktion erstellen:

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

und dann benutze es so:

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

Natürlich, wenn Sie mehr als einen Artikel hinzufügen möchten:

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

Der Vorteil solcher Ansätze besteht darin, dass Sie später der Funktion "addChild" weitere hinzufügen können, wenn Sie möchten. Beachten Sie, dass Sie für beide obigen Beispiele das Element zum Dokument hinzufügen müssen. Ein vollständiges Beispiel könnte also sein:

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

— Brad Parks
quelle

2

Ich denke, der letzte Teil dieser Antwort sorgt nur für Verwirrung. Das Anhängen an das Dokument war nicht Teil der Frage. Sie könnten es ganz einfach halten wie Cletus und den Leser sich vorstellen lassen, dass $ container ein UL ist. $ container.append ('<li> hi </ li>'); Wie auch immer, großartig. Vielen Dank.

— Mike S