Łatwiejszy sposób na uzyskanie obiektu jQuery z dołączonego elementu

82

Czy istnieje łatwiejszy / szybszy sposób na dodanie elementu za pomocą jQuery append:

Jak zdobyć element $ selectors:

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

Próbowałem:

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

ale to sprawia, że ​​$ selectors = $ container

Może to najszybszy / najlepszy sposób. Tylko sprawdzam.

slolife
źródło

Odpowiedzi:

165

Dlaczego nie tylko:

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

?

Wtedy masz dostęp do „el”.

cletus
źródło
2
Hm. Co się stanie, jeśli $containerw tym przypadku będzie wiele elementów? W moim przypadku chcę dodać coś do wszystkich instancji, a selektor pasuje i otrzymać kolekcję utworzonych elementów.
Rhys van der Waerden
2
to nie będzie działać na wielu wystąpieniach $container jsfiddle.net/onL028ty . appendToZamiast tego użyj sztuczki jsfiddle.net/6nmdh84e
ktutnik
63

To mój ulubiony sposób:

var $selectors = $('<div class="selectors"></div>').appendTo(container);
Magnar
źródło
3
+1 - moje też. Zrób wszystko, co musisz zrobić z nowo utworzonym elementem przed dołączeniem go do DOM.
Russ Cam
5
$selectors = $('<div/>').addClass('selectors').appendTo($container);
Hobbs
źródło
1
Dobra informacja, dzięki. Jest to dla mnie trochę rozwlekłe w porównaniu z innymi odpowiedziami, ale zastanawiam się, czy daje lepszą wydajność? Wydajność nie jest problemem w mojej konkretnej sytuacji, ale może dla innych.
slolife
2

Możesz również utworzyć nową funkcję jQuery, aby to zrobić:

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

a następnie użyj go w ten sposób:

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

oczywiście, jeśli chcesz dodać więcej niż jedną pozycję:

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

Zaletą takich podejść jest to, że później możesz dodać więcej do funkcji „addChild”, jeśli chcesz. Zwróć uwagę, że w przypadku obu powyższych przykładów musisz dodać element do dokumentu, więc pełny przykład może wyglądać tak:

$('body').addChild('<ul>').addChild('<li>hi</li>');
Brad Parks
źródło
2
Myślę, że ostatnia część tej odpowiedzi tylko dodaje zamieszania; dołączanie do dokumentu nie było częścią pytania. Można by to było naprawdę proste jak cletus i sprawić, by czytelnik wyobraził sobie, że $ container to UL. $ container.append ('<li> cześć </li>'); Tak czy inaczej, świetnie. Dzięki.
Mike S,