Question

$('#typo').remove().css('display', 'none').prependTo('#typo');

我认为remove（）将元素从dom中取出，因此，在此函数之后，没有对象，因此 - 为什么要更改其css然后 prependTo 功能吗？

Answer 1

以下是该如何制作：

$('#typo').remove()       // removes the #typo element from the DOM
.css('display', 'none')   // sets its display style to 'none'
.prependTo('#typo');      // and appends it BACK as first child of #typo

Answer 2

除非id已经重复，否则没有任何意义，可能在前缀选择器部分的typo中有#typo。

它只是删除元素并使用链接返回元素，即使它不在DOM中，然后应用css使其不可见，然后添加到另一个元素。

原来是：

$('#typo').remove().css('display', 'none').prependTo('#typo1');

您将在元素中看到id为typo1的div，但不可见。

Snippet1：

将隐藏的拼写错误置于可见拼写错误中（在HTML中使用重复的ID无效）

<div id="typo">typo</div>
<div id="typo">typo1</div>

$('#typo').remove().css('display', 'none').prependTo('#typo');

Snippet2：

将隐藏的拼写错误置于可见的拼写错误

之内

<div id="typo">typo</div>
<div id="typo1">typo1</div>

$('#typo').remove().css('display', 'none').prependTo('#typo1');

所以情况并非如此：

只需用

替换它

 $('#typo').remove()

并减小文件大小：）

Answer 3

元素可以存在于文档之外：

var myDiv = document.createElement("div");  // new element, but not in the document yet
document.body.appendChild(myDiv);           // NOW it's in the document

.prependTo()将所选元素作为参数指定的元素的第一个子元素插入。（如果参数包含或选择多个元素，则克隆要添加的元素。）

在这种情况下，由于传递给.prependTo()的参数是刚刚从DOM中删除的元素的id，因此它将不起作用。除非，否则会有重复ID的元素（使HTML无效）。

Answer 4

这是一个有点特殊的jQuery，因为它包含不必要的代码，但它不会有任何问题。事实上，它可以说是相当不错的，因为它对于一个稍微反直觉的过程非常明确。

remove不会破坏元素。它只是从文档中删除它。该元素继续存在于浏览器的内存中，并由remove方法返回。

css然后修改它，而prependTo然后将其重新插入文档。

对remove的调用并非绝对必要，因为prependTo本身会在重新添加之前将元素从其当前位置移除。这段代码可以：

$('#typo').css('display', 'none').prependTo('#typo');

尽管如此，很明显发生了什么，并且它可以避免浏览器进行两次回流，否则它将不得不这样做。

唯一不清楚的是如何从文档中删除元素#typo，然后将其重新添加为#typo的子元素，文档中可能已不再存在该元素！

Answer 5

我刚用这个测试过：http://jsfiddle.net/8zZ6j/1/

<div>blah <span id="typo">typo</span> blah <span id="typo">typo2</span>
</div>

结果如下：

<div>blah  blah <span id="typo"><span id="typo" style="display: none;">typo</span>typo2</span></div>

所以它的目的似乎是堆积具有typo id

的元素

这在jQuery中意味着什么？

5 个答案:

Snippet1：

Snippet2：