logo标签列表

如何删除嵌套的UL元素但保留子元素

javascriptjqueryhtml
3

我希望移除嵌套列表中的<ul>标签，然后将其子<li>元素添加到父<ul>元素中。例如：

<ul>
    <li>Item 1</li>
    <ul>
        <li>Item 2</li>
    </ul>
    <li>Item 3</li>
</ul>

Should become : 

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

我是jQuery的新手，目前我创建的内容无法正常工作，不确定出了什么问题：

 $content.find('ul').each(function() {
if ($(this).parent().is('li')) {
  var elements = $(this).children().detach();
  var closest = $(this).closest('li');
  $(this).remove();
  elements.appendTo(closest);
}
}

非常感谢您的帮助。

你的原始列表HTML无效，而且你的jQuery似乎在括号方面存在一些问题。 - j08691
我没有添加<html>和<body>标签，因为它们不相关。此外，我手动输入了jQuery代码，这就是为什么我错过了一个括号，现在已经更正。 - user1570775
@user1570775，他们所说的不是缺少<html>和<body>标签，而是指<ul>元素不能是<ul>元素的直接子元素；应该是<ul>...<li><ul><li>...</li></ul></li>...</ul>。 - Anthony Grist
我所说的无效HTML是指你发布的代码无效，而不是缺少完整的页面HTML示例。你不能将<ul>作为另一个<ul>的直接子元素。 - j08691
如果您在Word2003中创建了一个缩进列表，然后将其复制/粘贴到tinyMCE中，它就会以这种方式表示。 - user1570775
2个回答
6
那个解决方案适用于所给出的示例，但无法确定这个问题可能会发生在多少层级别之下，很抱歉我在描述时没有表述清楚。 - user1570775
1
尝试。
var elements = [];
$('ul.outer li').each(function(){
    elements.push(this); 
});
$('ul.outer').html('');
for(x in elements){
    $('ul.outer').append($(elements[x])[0].outerHTML);
}

如果您需要它适用于多个层级，例如...
<ul class="outer">
<li>Item 1</li>
<ul>
    <li>Item 2</li>
    <ul>
        <li>Item 2</li>
    </ul>
</ul>
<li>Item 3</li>
</ul>
任何一个 ul 元素都没有类。 - user1570775
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接