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

时间:2013-03-16 18:10:36

标签: jquery html-lists detach

我已经像这样构建了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做到这一点?

2 个答案:

答案 0 :(得分:0)

首先,您需要修复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/

答案 1 :(得分:0)

看看这是否对您有所帮助:

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