jQuery 如何在另一个元素中移动一个元素答案

【问题标题】：jQuery How do I move an element inside of another elementjQuery 如何在另一个元素中移动一个元素
【发布时间】：2010-03-23 17:27:11
【问题描述】：

您好，我正在使用 grails 导航插件，当它生成菜单时，它会将子导航放在主菜单下方，但我将菜单设为垂直菜单，因此我不希望整个菜单下的子菜单想要它在活动元素下。

示例：这是它生成菜单和子菜单的方式

<ul class="mainmenu">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>
<ul class="submenu">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>

我想要的是：

<ul class="mainmenu">
   <li>item1
     <ul class="submenu">
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
     </ul>
   </li>
   <li>item2</li>
   <li>item3</li>
</ul>

由于我不知道如何让 grails nav 插件执行此操作，所以我想我必须在 jquery 生成后执行此操作。有什么想法吗？

编辑

所以我从下面的答案中使用的 jquery 是：

<script type="text/javascript"> 
$(function() {
        alert("hi");
        $(".subnavigation").appendTo($(".navigation li:navigation_active"));
      });
</script>
....
<ul class="navigation" id="navigation_tabs">
    <li class="navigation_first">Item 1</li>
    <li class="navigation_active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="navigation_last">Item 5</li>
</ul> 
<ul class="subnavigation" id="subnavigation_tabs">
    <li class="subnavigation_first">Sub 1</li>
    <li>Sub 2</li>
    <li class="subnavigation_last">Sub 3</li>
</ul>

这似乎应该可以工作，但菜单看起来仍然与下面的所有子项相同。

【问题讨论】：

标签： jquery css grails menu list

【解决方案1】：

你可以这样做：

$(".submenu").appendTo($(".mainmenu li:first"));

或者：

$(".mainmenu li:first").append($(".submenu"));

或者，把它放在所有的下面（被 CSS 隐藏）：

$(".mainmenu li").append($(".submenu"));

编辑，对于更新后的问题：

$(".subnavigation").appendTo($(".navigation li.navigation_active"));

【讨论】：

我使用了你的代码，它看起来是正确的，但没有用。我编辑了我的帖子以显示我所拥有的。
@TripWired - 将这个：$(".subnavigation").appendTo($(".navigation li:navigation_active")); 更改为这个：$(".subnavigation").appendTo($(".navigation li.navigation_active")); navigation_active 部分是一个类，你可以在它前面加上 .，:first 是一个伪类，有点不同。
哦，我应该看到了。感谢您的帮助，现在工作正常。

【解决方案2】：

假设你的活动是鼠标悬停。

$("ul.mainmenu li").hover(function() {
    $(this).append($("ul.submenu"))
})

【讨论】：