Eklenen öğeden jQuery nesnesi almanın daha kolay yolu


82

JQuery append kullanarak öğe eklemenin daha kolay / daha hızlı bir yolu var mı:

$ Selectors öğesi nasıl alınır:

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

Denedim:

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

ama bu $ seçiciler = $ container yapar

Belki de en hızlı / en iyi yol budur. Sadece kontrol.

Yanıtlar:


165

Neden sadece:

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

?

O zaman "el" e erişiminiz olur.


2
Hm. $containerBu durumda birden fazla öğe varsa ne olur ? Benim durumumda, bir seçici eşleşmesinin tüm örneklerine bir şeyler eklemek ve oluşturulan öğelerin bir koleksiyonunu almak istiyorum.
Rhys van der Waerden

2
bu $container jsfiddle.net/onL028ty'nin birden çok örneği üzerinde çalışmayacaktır . Kullanım appendTohüner yerine jsfiddle.net/6nmdh84e
ktutnik

63

Bunu yapmanın en sevdiğim yolu:

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

3
+1 - benimki de. Yeni oluşturulan öğeyi DOM'a eklemeden önce yapmanız gereken her şeyi yapın.
Russ Cam

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

1
İyi bilgi, teşekkürler. Diğer cevaplarla karşılaştırıldığında benim için biraz ayrıntılı, ancak performans açısından daha iyi olup olmadığını merak ediyorum. Performans benim özel durumumda bir sorun değil, belki diğerleri için.
slolife

2

Bunu yapmak için yeni bir jQuery işlevi de oluşturabilirsiniz:

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

ve sonra şu şekilde kullanın:

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

tabii ki birden fazla öğe eklemek isterseniz:

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

Bunun gibi yaklaşımların avantajı, daha sonra isterseniz "addChild" işlevine daha fazlasını ekleyebilmenizdir. Yukarıdaki her iki örnek için de öğeyi belgeye eklemeniz gerektiğine dikkat edin, bu nedenle tam bir örnek olabilir:

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

2
Sanırım bu cevabın son kısmı sadece kafa karışıklığı yaratıyor; belgeye eklemek sorunun bir parçası değildi. Bunu cletus gibi gerçekten basit tutabilir ve okuyucunun $ container'ın bir UL olduğunu düşünmesini sağlayabilirsiniz. $ container.append ('<li> merhaba </li>'); Her neyse, harika. Teşekkürler.
Mike S
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.