Question

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

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

问题是：为什么一个工作而另一个工作没有，需要改变什么 else if（this.tagName =='H2'）{ $（这）一个.remove（）; } 不工作的例子？

为了节省您追捕差异，唯一的一个是/ *感兴趣的行* /

工作

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

不工作

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

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

P.S。我正在寻求澄清，因为我理解这个问题的存在只是因为我对这个例子的工作原理有缺陷的理解。

提前致谢。

Answer 1

为什么不使用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);
});

Answer 2

执行此操作时：

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>元素id content。出于说明的目的，我们将这样表示：

[<h2>, <div#content>]

现在，我们在您的代码中处理两个案例。

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

在第一种情况下，我们从jQuery对象中对元素的引用开始;这是<div#content>元素。然后，我们访问其子项[<p>, <div#subcontent>]，将其过滤到<div#subcontent>并将其删除。由于我们的数组仍然引用<div#content>，并且反过来引用了它的后代，因此对DOM的更改会影响它（从<div#subcontent>删除对子<div#content>的引用}）。

在第二种情况下，我们从jQuery对象中对元素的引用开始;这是<h2>元素。然后，我们只需删除此元素 - 将其从DOM中删除，因此将更新其他DOM元素（即其祖先）中对它的任何引用。但是，我们仍然引用了存储在jQuery对象中的DOM元素。

Answer 3

在您的代码中

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

然后

.html(content)

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

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

jquery .html（）注入对象与包含对象的变量

工作

不工作

3 个答案: