使用 jQuery 删除内部 UL 和 Li 元素

Posted

技术标签:

【中文标题】使用 jQuery 删除内部 UL 和 Li 元素【英文标题】:Delete inner UL and Li elements with jQuery 【发布时间】:2013-03-16 18:10:35 【问题描述】:

我已经像这样构建了 UL/Li

<ul>
 <li><a>1.1</a></li>
 <li>.....</li>
 <li><a>1.N</a></li>
    <ul>
      <li><a>2.1</a></li>
         <ul>
           <li><a>3.1</a></li>
           .....
           <li><a>3.N</a></a></li>
         </ul>
    </ul> 
</ul>

我想删除所有 UL 和 LI 元素并保留所有标签。我的目标是将菜单作为多行字符串。

我如何使用 jQuery 来做到这一点?

【问题讨论】:

您希望生成的对象是什么样的? 需要一个更好、更详细的解释...目前无法理解您想要什么。例如,您的 html 中的标签是什么? multi-row strings 是什么意思 嗨。谢谢你的回答。我尝试执行下一个函数 jQuery(init); function init() jQuery('ul li:not(:first):not(:last)').detach();但是这个函数会删除所有!并且不在内部 元素中保留数据 【参考方案1】:

看看这对你有没有帮助:

Js:

var tags = $("ul li").map( function()
          return $(this).html();
        ).get();      // get all tags in an Array.  I suspect you meant Array by saying `multi row strings`
$("#main ul").remove();

$("#main").append(tags);

Fot Html;

<div id="main">
<ul>
 <li><a>1.1</a></li>
 <li><a>1.N</a></li>
 <li><ul>
      <li><a>2.1</a></li>
       </li><ul>
           <li><a>3.1</a></li>
           <li><a>3.N</a></a></li>
         </ul>
       </li>
    </ul>
</li>
</ul>
</div>

Sample

【讨论】:

嗨,A. V。您的代码返回结果 3 次。您的代码删除所有标签,但返回 的完整列表并从第二层和其他子层添加 UL/Li。我修改你的代码。所以它现在可以正常工作 var tags = jQuery("ul li").map( function() return jQuery(this).html(); ).get(); jQuery("#exp_horizMenu").append(tags); jQuery("#exp_horizMenu span").remove(); jQuery("#exp_horizMenu ul").remove();无论如何,谢谢你的想法。 无论如何,我不清楚你的 Html 代码结构以及你需要附加的所有标签。只是想给你一个关于如何开始的想法......很高兴你做到了用你的努力...快乐编码.. :)【参考方案2】:

首先您需要修复您的 HTML。您不能在其他 ul 元素中包含 ul 元素,它们必须在 li 元素中:

<ul>
  <li><a>1.1</a></li>
  <li><a>1.2</a></li>
  <li>
    <a>1.N</a>
    <ul>
      <li>
        <a>2.1</a>
        <ul>
          <li><a>3.1</a></li>
          <li><a>3.N</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

要删除列表并保留链接,请将链接移出列表,然后删除列表。例如:

$('ul>li>a').appendTo(document.body);
$('ul').remove();

演示:http://jsfiddle.net/kRBRC/

【讨论】:

@user2177635:它保留a 元素并删除ulli 元素。查看演示。

以上是关于使用 jQuery 删除内部 UL 和 Li 元素的主要内容,如果未能解决你的问题,请参考以下文章

JQuery 添加删除元素

jquery 怎么获得动态添加后的子元素个数

Jquery垂直多级菜单父li捕获内部ul的鼠标点击?

jquery查找数组元素是不是存在的问题

jquery如何获取ul中第一个li和最后一个li

jquery 请问我怎么获得每个ul的第 二个 或者第三格li元素呢?