追加された要素からjQueryオブジェクトを取得する簡単な方法


82

jQueryの追加を使用して要素を追加するためのより簡単で迅速な方法はありますか?

$ selectors要素を取得する方法:

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

私は試した:

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

しかしそれは$ selectors = $ containerになります

多分それが最も速く/最良の方法です。チェックしてるだけ。

回答:


165

なぜだけではないのですか?

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

次に、「el」にアクセスできます。


2
うーん。$containerこの場合、複数の要素があるとどうなりますか?私の場合、セレクターが一致するすべてのインスタンスに何かを追加して、作成された要素のコレクションを取得したいと思います。
Rhys van der Waerden 2014

2
これは、$container jsfiddle.net / onL028tyの複数のインスタンスでは機能しません。使用appendToトリック代わりjsfiddle.net/6nmdh84e
ktutnik

63

これは私のお気に入りの方法です。

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

3
+ 1-私のものも。新しく作成された要素をDOMに追加する前に、必要なことをすべて実行してください。
ラスカム

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

1
良い情報、ありがとう。他の回答と比べると少し冗長ですが、パフォーマンスの面で優れているのではないでしょうか。パフォーマンスは私の特定の状況では問題ではありませんが、おそらく他の人にとっては問題です。
slolife 2009

2

それを行うために新しいjQuery関数を作成することもできます。

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

そしてそれを次のように使用します:

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

もちろん、複数のアイテムを追加したい場合:

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

このようなアプローチの利点は、後で必要に応じて「addChild」関数にさらに追加できることです。上記の両方の例では、要素をドキュメントに追加する必要があるため、完全な例は次のようになることに注意してください。

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

2
この答えの最後の部分は混乱を加えるだけだと思います。ドキュメントへの追加は質問の一部ではありませんでした。cletusのようにシンプルに保ち、$ containerがULであると読者に想像させることができます。$ container.append( '<li> hi </ li>'); とにかく、素晴らしい。ありがとう。
マイクS
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.