Question

我的CMS将导航作为UL呈现。我想拿这个UL并且只使用它的一部分用于侧导航。我要做的是删除父UL并仅显示具有子页面的嵌套UL。这是一个例子

<ul id="mainnav">
<li> Main Nav 1 </li>
<li> Main Nav 2 
  <ul id="subnav1">
      <li> Sub Nav 1 </li>
      <li> Sub Nav 2 </li>
      <li> Sub Nav 3 </li>
  </ul>
</li>
<li> Main Nav 3 </li>
</ul>

我想要做的只是显示ID为“subnav1”的UL并删除菜单的其余部分。我可以使用“visibility：none”隐藏主要的ul，但菜单仍占用空间。 “display：none”隐藏了整个菜单，我似乎无法只针对subnav1 ul。我希望jquery允许我删除父ul。如果有人有任何建议，请告诉我。感谢。

Answer 1

主要问题解决方案：

$("#subnav1").insertBefore($("#mainnav"));
$("#mainnav").remove();

次要问题解决方案：能见度：没有人占用空间。使用css将位置更改为相对。

Answer 2

jQuery.fn.outerHTML = function(s) {
return (s)
? this.before(s).remove()
: jQuery("<p>").append(this.eq(0).clone()).html();
}


$('#mainnav').outerHTML($('#subnav1').outerHTML());

这将从DOM中删除主UL。

Answer 3

我喜欢pokrate的回答，但我认为它不会像书面那样有效。

以下是有关insertBefore：http://docs.jquery.com/Manipulation/insertBefore#selector

的文档

根据示例，它应该是：

$("#subnav1").insertBefore("#mainnav"); 
$("#mainnav").remove();

如何使用Jquery删除父UL

3 个答案: