Question

我有这个HTML：

<nav id="services">
<ul>
<li><a href="/uplighting">uplighting</a></li>
<li><a href="/backdrops">illuminated backdrops</a></li>
<li><a href="/monograms">monogram projection</a></li>
<li><a href="/table">table lighting</a></li>
<li><a href="/lanterns">outdoor lanterns</a></li>
</ul>
</nav>

和这个jquery：

$("#services ul li a").mouseenter(function(){

pop_item_link = $(this).attr('href');

$("<article id=\"pop_item\" href=\"" + pop_item_link + "\"></article>").appendTo("#services");

});

工作正常。但是，如果我改为使用父选择器：

$("<article id=\"pop_item\" href=\"" + pop_item_link + "\"></article>").appendTo(this).parent().parent().parent();

在锚点后插入html：

<nav id="services">
<ul>
<li><a href="/uplighting">uplighting</a></li>
<li><a href="/backdrops">illuminated backdrops</a>
<article id="pop_item" href="/backdrops"></article>
</li>
<li><a href="/monograms">monogram projection</a></li>
<li><a href="/table">table lighting</a></li>
<li><a href="/lanterns">outdoor lanterns</a></li>
</ul>
</nav>

使用nearest（）

也是如此

有谁知道我在这里做错了什么？我想避免使用id选择器，因此我可以将相同的代码用于另一个菜单。

Answer 1

你应该把它作为

.appendTo($(this).parent().parent().parent())

OR

.appendTo($(this).closest('nav')

_{请注意，.parent()和.closest()位于.appendTo()}

内

Answer 2

你想要：

.appendTo($(this).parent().parent().parent())

或

.appendTo($(this).closest('nav'))

Answer 3

我愿意

.appendTo($(this).parentsUntil('nav').parent('nav');

Answer 4

.appendTo(this)即将发挥作用，因为this a是a追加.parent()的原因。因此，当您添加nav时，您就像在准备好操作匹配元素的父级时那样链接方法。

您想要附加到.appendTo( $(this).closest('nav') );，如下所示：

{{1}}

appendTo在错误的地方添加html

4 个答案: