jquery - 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'));

有任何想法吗？

score 1 · Accepted Answer

这应该有效：

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

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

jquery 文档非常适合解释这一点：

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

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

score 1 · Accepted Answer

当我想它应该选择第一个时，您.entry:first-child正在选择它本身。因此，您当前正在尝试在其自身之后插入一个元素，但这是行不通的。divul

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

试试这个...

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

您还可以看到您可以将选择器字符串传递给insertAfter，而无需再次使用$().

score 0 · Accepted Answer

它的命名令人困惑，因为它不是“找到具有类 'entry' 的元素，然后选择它的第一个子元素”。jQuery 文档说，“[First-child] 选择所有 [它们自己] 其父级的第一个子级的元素。” 在这种情况下，哪个是您的 div.entry。

3 回答 3