使用 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
元素并删除ul
和li
元素。查看演示。以上是关于使用 jQuery 删除内部 UL 和 Li 元素的主要内容,如果未能解决你的问题,请参考以下文章