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

Rya*_*yan 7 html javascript jquery

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

<body>
<div id="project">
  <h1>Hi</h1>
  <h2>Hello</h2>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)

以下jQuery代码:

$(function(){
  var h = $('#project').html();
  $('#project').remove();
  $(h).hide().appendTo('body');
  alert("Created HTML, hide, and appended!");
});
Run Code Online (Sandbox Code Playgroud)

$(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')

Jus*_*son 7

我无法在Firefox中复制您的错误.但是,您可能希望尝试使用以下方法进行清理:

$('#project').remove().children().appendTo('body').hide();
Run Code Online (Sandbox Code Playgroud)

分解,这就是正在发生的事情

// 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();
Run Code Online (Sandbox Code Playgroud)

其他人提出这.hide()会导致问题,因为它所应用的节点不是主文档的一部分; 然而,事实并非如此.只要你保持对任何节点的引用,你可以影响它的样式属性(通过hide,show等等).

您可能想要检查的一件事是确保$('#project')实际返回(如果有)预期节点.否则可能会出现问题.


所以我在Safari中探索并发现了你的问题.这是开发人员控制台的转储.

> var h = $('#project').html();
undefined
> var t = $(h);
undefined
Run Code Online (Sandbox Code Playgroud)

到现在为止还挺好. 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.
Run Code Online (Sandbox Code Playgroud)

这是您描述的错误.检查jQuery对象中的每个项目将显示以下错误

> t[0]
<h1 style=?"display:? none;? ">?Hi?</h1>
Run Code Online (Sandbox Code Playgroud)

好...

> t[1]
(whitespace)
Run Code Online (Sandbox Code Playgroud)

该死.真?这是问题所在.空白节点没有style属性,这就是造成问题的原因.

> t[2]
<h2>?Hello?</h2>
Run Code Online (Sandbox Code Playgroud)

这就是为什么将一个节点的HTML复制到另一个节点只是为了移动这些节点是一种糟糕的技术.我建议你使用我上面提供的代码片段.