0

不确定标题是否正确，如果您不同意，请提出更改。

我正在处理通过 jquery (.load()) 加载到 div 中的内容。我不得不从加载的内容中删除几个项目。我这样做的方式与我编写的 jsfiddle 示例 ( http://jsfiddle.net/AzxaL/12 ) 中的方式相同。这个不使用会创建 id 重复的 load() 函数，但这无关紧要。

问题是：为什么一个工作而另一个不工作以及需要改变什么 else if(this.tagName == 'H2') { $(this).remove(); 不工作的例子？

为了节省您寻找差异，唯一的一个是在 /* 感兴趣的行 */

在职的

$('#copy_working_box').html($('#copy_working_box').children('#wrapper').children()).fadeIn(300);

不工作

$('#copy_working_not_box').html(content).fadeIn(300);

另外，请注意，在不工作的示例中， div#subcontent 确实被删除了，只有 h2 没有。

PS 我正在寻求澄清，因为我知道这个问题的存在只是因为我对这个例子的工作原理有错误的理解。

提前致谢。

4

3 回答 3

2

为什么不使用 jQuery 过滤器来删除元素？

$('#copy_working').click(function() {
    var $clone = $('#wrapper').clone();

    // remove unwanted elements
    $clone.find('#content #subcontent, h2').remove()

    $('#copy_working_box')
        .hide()
        .html($clone)
        .fadeIn(300);
});
于 2012-10-09T11:38:27.863 回答
1

当你这样做时：

var content = $('#copy_working_not_box').children('#wrapper').children();

在代码运行时，您会得到一个包含元素列表的 jQuery 对象。该列表不是动态的，因此从 DOM 中删除一个（或多个）元素（使用.remove()）不会更新对象中的元素列表。但是，这些元素内容的更改会反映为您的 jQuery 对象包含对 DOM 元素的引用。

当您使用 jQuery 函数选择元素时，在本例中使用以下代码：

var content = $('#copy_working_not_box').children('#wrapper').children();

你最终得到的是一个 jQuery 对象，其中包含对相应 DOM 元素的引用。jQuery 对象类似于数组（它们有一个length属性，并且可以使用方括号表示法访问单个元素[0]），因此出于我们的目的，我们可以将其简单地视为元素数组。

鉴于我们正在使用的 HTML，该数组将由一个<h2>元素和一个<div>带有idof的元素组成content。出于说明的目的，我们将这样表示：

[<h2>, <div#content>]

现在，我们正在处理您的代码中的两种情况。

  1. 从 DOM 中删除一个元素，该元素是我们数组中 DOM 元素的后代（jQuery 对象）。
  2. 从 DOM 中删除一个元素，该元素是我们数组中的 DOM 元素之一。

在第一种情况下，我们从 jQuery 对象中的元素的引用开始；这就是<div#content>元素。然后我们访问它的孩子 - [<p>, <div#subcontent>]，将其过滤到仅<div#subcontent>并删除它。由于我们的数组仍然有一个对 的引用<div#content>，而它又对它的后代有引用，所以对 DOM 的这种更改会影响它（对子项的引用<div#subcontent>从 中删除<div#content>）。

在第二种情况下，我们从 jQuery 对象中的元素的引用开始；这就是<h2>元素。然后我们简单地删除这个元素——从 DOM 中删除它，因此在其他 DOM 元素（即它的祖先）中对它的任何引用都将被更新。但是，我们仍然有一个对存储在 jQuery 对象中的 DOM 元素本身的引用。

于 2012-10-09T11:43:37.623 回答
0

在你的代码中你正在做

var content = $('#copy_working_not_box').children('#wrapper').children();

进而

.html(content)

请注意，该jQuery.html(htmlString)方法接受htmlString作为输入而不是object

也许你想做.html(content.html());

于 2012-10-09T11:32:15.647 回答