Почему jQuery не удается скрыть определенный HTML?
Я выполнял голову в стену, пытающуюся понимать это. Возьмите следующее тело HTML:
Hi
Hello
И следующий код jQuery:
$(function(){
var h = $('#project').html();
$('#project').remove();
$(h).hide().appendTo('body');
alert("Created HTML, hide, and appended!");
});
$(h).hide() часть заставляет jQuery выдавать исключение в Safari 4 и Firefox 3.5.
Safari: TypeError: Result of expression 'this[a].style' [undefined] is not an object.
Firefox: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0" nsresult: ...]
Когда я изменяю HTML для содержания только одного из этих двух заголовков (если Вы удаляете или от HTML сценарий работает успешно. Почему это?
Для попытки за себя см. http://jsbin.com/avisi/edit
Править: Я на самом деле не пытаюсь удалить и элемент из DOM и повторно вставить его путем копирования HTML. Это - просто тестовый сценарий для ошибки, которую я имею в более сложном коде, и я пытаюсь понять, почему эта ошибка происходит. Я соглашаюсь, что, если я хотел выполнить, что показывают здесь, я использовал бы что-то как $('#project').remove().children().appendTo('body')
3 ответа
Я не могу продублировать вашу ошибку в Firefox. Тем не менее, вы можете попробовать очистить ее следующим образом:
$('#project').remove().children().appendTo('body').hide();
Вот что происходит
// Get the `project` container
$('#project')
// Remove it from the page
.remove()
// Get its children (the h1, h2, etc)
.children()
// Append those nodes to the body
.appendTo('body')
// Hide those nodes
.hide();
Другие предлагают, что .hide() вызывает проблемы, поскольку узел, к которому он применяется, не является частью основного документа; однако это не так. Пока вы сохраняете ссылку на любой узел, вы можете влиять на его стилевое свойство (через hide, show и т.д.).
Одна вещь, которую вы, возможно, захотите проверить, это убедиться, что $('#project') действительно возвращает ожидаемый узел (если таковой имеется). В противном случае могут возникнуть проблемы.
Итак, я поковырялся в Safari и нашел вашу проблему. Вот дамп из консоли разработчика.
> var h = $('#project').html();
undefined
> var t = $(h);
undefined
Пока все хорошо. undefined здесь просто означает, что оператор (оператор var) не имеет возвращаемого значения (а оно не имеет)
> t.hide()
ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js:131TypeError: Result of expression 'this[a].style' [undefined] is not an object.
Вот ошибка, которую вы описали. Инспектирование каждого элемента в объекте jQuery покажет ошибку ниже
> t[0]
<h1 style="display: none; ">Hi</h1>
Хорошо...
> t[1]
(whitespace)
Черт. Правда? Вот в чем проблема. Пробельные узлы не имеют атрибута style, что и вызывает проблему.
> t[2]
<h2>Hello</h2>
Вот почему копирование HTML одного узла в другой только для того, чтобы переместить эти узлы, является плохой техникой. Я предлагаю вам использовать фрагмент, который я привел выше.
В $(h) выделен текстовый узел. Однако мы можем отфильтровать его с помощью функции filter.
Это должно работать (я тестировал только в FF):
$(function(){
var h = $('#project').html();
$('#project').remove();
$(h).filter("*").hide().appendTo('body');
alert("Created HTML, hide, and appended!");
});
Довольно странное поведение IMO.
Вы уже удалили содержимое из DOM, поэтому скрывать нечего. Если вы сделаете
$(h).appendTo('body').hide();
это должно сработать