Более простой способ получить объект jQuery из добавленного элемента

82

Есть ли более простой / быстрый способ добавить элемент с помощью добавления jQuery:

Как получить элемент $ selectors:

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

Я старался:

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

но это делает $ selectors = $ container

Может быть, это самый быстрый / лучший способ. Просто проверка.

jquery css-selectors append

— Slolife
источник

165

Почему не просто:

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

?

Тогда у вас есть доступ к "el".

— Cletus
источник

2

Хм. Что будет, если $containerв этом случае будет несколько элементов? В моем случае я хочу добавить что-то ко всем экземплярам, которым соответствует селектор, и получить коллекцию созданных элементов.

— Рис ван дер Варден,

2

это не будет работать с несколькими экземплярами $container jsfiddle.net/onL028ty . Используйте appendToвместо этого трюк jsfiddle.net/6nmdh84e

— ktutnik

63

Это мой любимый способ сделать это:

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

— Магнар
источник

3

+1 - мое тоже. Сделайте все, что вам нужно сделать с вновь созданным элементом, прежде чем добавлять его в DOM.

— Russ Cam

5

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

— Hobbs
источник

1

Хорошая информация, спасибо. Для меня это немного многословно по сравнению с другими ответами, но мне интересно, дает ли он лучшую производительность? Производительность не является проблемой в моей конкретной ситуации, но, возможно, для других.

— slolife

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> привет </li>'); В любом случае, отлично. Благодарю.

— Mike S