Більш простий спосіб отримати об’єкт jQuery з доданого елемента

82

Чи є простіший / швидший спосіб додати елемент за допомогою додавання jQuery:

Як отримати елемент $ selectors:

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

Я намагався:

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

але це робить $ селектори = $ контейнер

Можливо, це найшвидший / найкращий спосіб. Просто перевіряю.

jquery css-selectors append

— slolife
джерело

165

Чому не просто:

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

?

Тоді ви отримаєте доступ до 'el'.

— клетус
джерело

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);

— Гоббс
джерело

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

Я думаю, що остання частина цієї відповіді лише додає плутанини; додавання до документа не було частиною питання. Ви можете зробити це по-справжньому простим, як клетус, і нехай читач уявить, що $ контейнер - це UL. $ container.append ('<li> привіт </li>'); У будь-якому разі, чудово. Дякую.

— Mike S