Подтвердить что ты не робот

Как создать пустой, не пустой объект 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/

4b9b3361

Ответ 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);