Question

我一直在试图解决这个问题。采用以下HTML正文：

<body>
<div id="project">
  <h1>Hi</h1>
  <h2>Hello</h2>
</div>
</body>

以下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中删除<h1>或<h2>，则脚本会成功运行。为什么会这样？

要亲自尝试，请参阅http://jsbin.com/avisi/edit

编辑：我实际上并没有尝试从DOM中删除元素并通过复制HTML重新插入它。这只是我在更复杂的代码中遇到的错误的测试用例，我试图理解为什么会出现这个错误。我同意，如果我想完成此处显示的内容，我会使用类似$('#project').remove().children().appendTo('body')

的内容

Answer 1

我无法在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复制到另一个节点只是为了移动这些节点是一种糟糕的技术。我建议你使用我上面提供的代码片段。

Answer 2

在$（h）中选择了一个文本节点。我们可以使用过滤功能对其进行过滤。

这应该有用（我只在FF中测试过）：

$(function(){
  var h = $('#project').html();  
  $('#project').remove();
  $(h).filter("*").hide().appendTo('body');

 alert("Created HTML, hide, and appended!");
});

非常奇怪的行为IMO。

Answer 3

您之前从DOM中删除了内容，因此无需隐藏任何内容。如果你愿意的话

$(h).appendTo('body').hide();

它应该有用

为什么jQuery无法隐藏某些HTML？

3 个答案: