jquery - 这在 jQuery 中是什么意思？

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 被复制，否则这没有任何意义，可能有一个typoin #typoin 前置选择器部分。

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

如果是：

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

您将在元素中看到带有 id 的 div typo1，但它是不可见的。

片段1：

将在可见错字中添加不可见的错字（在 HTML 中使用重复 id 无效）

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

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

片段2：

将在可见的typo1中添加不可见的错字

<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然后将其插入回文档中。

调用 toremove并不是绝对必要的，因为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>

所以它的目的似乎是堆积具有typoid的元素