JQuery .insertAfter在这个例子中不起作用 - 为什么？

Question

我不确定为什么我的jquery代码无效。我正在为我的公司创建一个Wordpress主题，我似乎无法使.insertAfter（）函数正常工作。它只删除页面上的所有内容。

<div class='entry'>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>

JQuery部分：

$('.entry:first-child').insertAfter($('.entry:last-child'));

有什么想法吗？

Answer 1

这应该有效：

$('.entry ul:first-child').insertAfter($('.entry ul:last-child'));

http://jsbin.com/ihihi4/5

正如Alex指出的那样，您可以在.insertAfter调用中使用另一个选择器而不是jquery对象。

jquery文档非常适合解释这个：

http://api.jquery.com/insertAfter/

值得注意的是insertAfter和after之间的细微差别。

http://api.jquery.com/after

同样适用于insertBefore / before和appendTo和append。了解差异很有用。

Answer 2

我的.entry:first-child正在选择div本身，我想它应该选择第一个ul。所以你现在正试图在它自己之后插入一个元素，这不起作用。

console.log($('.entry:first-child')[0] == $('.entry:last-child')[0]); // true

试试这个......

$('.entry ul:first-child').insertAfter('.entry ul:last-child');

jsFiddle

您还可以看到只需将选择器字符串传递给insertAfter，就不需要再次使用$()将其包裹起来。

Answer 3

这是令人困惑的名字，因为它不是“找到带有类'条目的元素然后选择它的第一个孩子。” jQuery文档说，“[First-child]选择[他们自己]作为父母第一个孩子的所有元素。”在这种情况下，你的div.entry。