Manera más fácil de obtener un objeto jQuery del elemento agregado

81

¿Existe una forma más fácil / rápida de agregar el elemento usando jQuery append?

Cómo obtener el elemento $ selectors:

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

Lo intenté:

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

pero eso hace $ selectores = $ contenedor

Quizás esa sea la mejor y más rápida forma. Solo revisando.

jquery css-selectors append

— Slolife
fuente

161

Por qué no solo:

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

?

Entonces tienes acceso a 'el'.

— cletus
fuente

2

Hm. ¿Qué pasa si $containertiene varios elementos en este caso? En mi caso, quiero agregar algo a todas las instancias que coincida con un selector y obtener una colección de elementos creados.

— Rhys van der Waerden

2

esto no funcionará en varias instancias de $container jsfiddle.net/onL028ty . Utilice appendTotruco en lugar jsfiddle.net/6nmdh84e

— ktutnik

61

Esta es mi forma favorita de hacerlo:

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

— Magnar
fuente

3

+1 - el mío también. Haga todo lo que necesita hacer con el elemento recién creado antes de agregarlo al DOM.

— Russ Cam

5

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

— hobbs
fuente

1

Buena información, gracias. Es un poco detallado para mí en comparación con las otras respuestas, pero me pregunto si tiene un mejor rendimiento. El rendimiento no es un problema en mi situación particular, pero tal vez para otros.

— slolife

2

También puede crear una nueva función jQuery para hacerlo:

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

y luego úsalo así:

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

por supuesto, si desea agregar más de un elemento:

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

La ventaja de enfoques como este es que más adelante puede agregar más a la función "addChild" si lo desea. Tenga en cuenta que para los dos ejemplos anteriores, debe agregar el elemento al documento, por lo que un ejemplo completo podría ser:

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

— Brad Parks
fuente

2

Creo que la última parte de esta respuesta solo agrega confusión; adjuntar al documento no era parte de la pregunta. Podría mantenerlo realmente simple como cletus y hacer que el lector imagine que $ container es un UL. $ container.append ('<li> hola </li>'); De todos modos, genial. Gracias.

— Mike S