Как создать пустой, не пустой объект jQuery, готовый для добавления?
Я хочу добавить некоторый html к пустым объектам без значения jQuery только в цикле, но он не работает, если я не создаю объект и не добавляю html-тег во время создания. Как я могу создать пустой объект jQuery и иметь возможность добавлять html к нему позже?
//var $new = $().add(""); //can't use this object in the loop
//var $new = $([]); //can't use this object in the loop
//var $new = $(); //can't use this object in the loop
//var $new = $("#nonexistingelement"); //can't use this object in the loop
var $new = $().add("<tr>"); //works but I don't want to add any html at this point.
$.each(.....)
{
$new.append("<sometag>");
});
alert($new.html()); //should display some html
Дополнение:
http://jsfiddle.net/vfPNT/
Ответы
Ответ 1
Я не мог найти другого способа, поэтому начал с <tr>
. Удаление <tr>
при сохранении содержимого не получилось, и поэтому я разместил вопрос. Итак, вместо этого я создал новый выбор jQuery, выбирая все <sometag> which were inside the <tr>
и отбрасывая $new.
var $new = $().add("<tr>");
$.each(.....)
{
$new.append("<sometag>");
});
$new.append("</tr>");
$newObject = $('sometagt', $new)
..... do more work using $newObject
Ответ 2
Ваша проблема заключается в том, что нет объектов "null" jQuery, которые нельзя добавить и "пустые", которые могут быть. Вы уже определили несколько способов создания пустого, и, хотя может быть и больше, это не имеет значения - то, что вы пытаетесь сделать, просто не будет делать то, что вы ожидаете, независимо от того, как вы начинаете, потому что...
... append()
изменяет объект DOM, а не объект jQuery. И пустой объект jQuery не имеет DOM! У Томалака была правильная идея, хотя вы, возможно, и не поняли этого.
Я собираюсь сделать три замечания о jQuery, о которых вы, вероятно, уже знаете, но которые полезны для понимания остальной части этого ответа и, следовательно, могут принести пользу будущим читателям:
- Объект jQuery в корне представляет собой набор элементов DOM.
- Некоторые методы jQuery работают на множестве, а некоторые работают с узлами в наборе.
- Некоторые методы jQuery работают только с (или извлекают информацию только из) с первым node, добавленным в набор.
Учитывая эти три наблюдения, рассмотрим ваш пример:
// 1. create an empty set somehow (doesn't matter how)
var $new = $();
// 2. iterate over something
$.each( ..., function( ... )
{
// 3. construct a DOM fragment from HTML, and append it
$new.append("<sometag>");
});
// 4. try to display HTML corresponding to the jQuery object
alert($new.html());
В этом примере шаг № 3 не сможет сделать ничего полезного, потому что цель append()
заключается в том, чтобы взять все элементы DOM и добавляет их как дочерние элементы для каждого элемента DOM в наборе. Поскольку $new
является пустым множеством, нет элементов для добавления, и... ничего не происходит. Шаг №1 работает очень хорошо, но, создав набор без каких-либо элементов DOM, вы настроили себя на неудачу, когда пытаетесь использовать существующие методы для изменения DOM! Ссылка Наблюдение № 2... для изменения набора необходимо вызвать метод, который фактически работает с набором.
Итак, скажем, вместо этого мы используем метод модификации add()
:
$new = $new.add("<sometag>");
Теперь мы хорошо, не так ли? Каждый проход через цикл создаст новый объект jQuery, состоящий из предыдущего набора + вновь созданного элемента. Ну...
... это просто приведет к шагу 4, чтобы сделать что-то нечетное. См. html()
- один из тех методов, которые я упомянул в Наблюдении № 3 - он работает только с первым элементом в наборе. Поэтому вместо последовательности ("<sometag><sometag><sometag>..."
) вы получите только представление HTML элемента, созданного на первом проходе через цикл ("<sometag>"
). За исключением... Вы даже не получите этого, потому что html()
создает представление элемента children - так, Re действительно будет в конечном итоге с ""
...
Это было всего лишь большое разочарование: вы начали работать с набором (шаг № 1), затем попытались работать с DOM (шаг № 3) и закончили, пытаясь вытащить данные из одного элемента DOM ( которого не было) (и не было бы никаких данных, если бы это было сделано) (Шаг №4).
Решение, которое вы, наконец, придумали, не страшно - вы, по сути, выбираете, чтобы добавить один корневой элемент в начало набора и полностью работать с этим DOM, пока вы не добавите новые элементы и не сможете работать с ними. Вы проигнорировали его из своего пересмотренного примера, но html()
тоже будет работать, поскольку он просто сбросит содержимое вашего корневого элемента.
Но для того, чтобы быть полным, я дам вам последний пример, который работает на множестве, начиная с пустого объекта jQuery:
var $new = $();
$.each( [1, 2, 3, 4], function(i, v)
{
$new = $new.add("<div>");
});
alert($new.length == 4); // true
// alerts: <div></div><div></div><div></div><div></div>
alert($("<div>").append($new).html());
Ответ 3
Фрагменты документа идеально подходят для этого; создает пустой объект, готовый для добавления.:)
$(document.createDocumentFragment())
Ответ 4
Ваш объект $new
является пустым селектором, поэтому append
не имеет наборов для добавления.
add
требуется добавить DOM node, а затем добавить к этим узлам DOM. Не думайте, что вы можете не начинать с .add
.
Ответ 5
i проверить это решение, но оно не сработало для меня, оно всегда оставалось пустым объектом jQuery...
Если кому-то интересно, вот мое решение:
var jQueryElements = [],
$new;
$.each( [1, 2, 3, 4], function(i, v){
jQueryElements = jQueryElements.push($('<div>').get(0));
});
$new = $(jQueryElements);