Question

我有这样的情况：

<ul>
    <li>
        <a href="#">Link 1</a>
        <ul>
            <li><a href="">Sub link</a></li>
        </ul>
    </li>
    <li>
        <a href="">Link 2</a>
        <ul>
            <li><a href="">Sub link</a></li>
        </ul>
    </li>
</ul>

如果它有子元素，我需要将span标记包含在文本中。所以这个最好的李需要看起来像

<li><a href="#"><span>Link 1</span></a>

它需要无限的部门：

<ul>
  <li>
    <ul>
      <li>
        <ul n>
           <li n>

我甚至不知道如何解决这个问题。我厌倦了：

$('li').parent().wrapInner('<span />');

但不是它。

我将不胜感激。

TNX，

Answer 1

$('li ul').parents('li').children('a').wrapInner('<span />');

这应该是一个快速的方法，我昨天回答了类似的问题并制作了一个jsperf：http://jsperf.com/jquery-has-vs

这是一个证明：http://jsfiddle.net/n9Ew8/2/

的jsfiddle

文档：

.siblings()：http://api.jquery.com/siblings

.wrapInner()：http://api.jquery.com/wrapinner

Answer 2

试试这个：

$("li:has(ul) > a").wrapInner("<span />")

选择具有子列表的每个列表元素的锚标记，并将其内容包装在span标记中。

http://jsfiddle.net/Tentonaxe/EKjfT/

编辑：响应jsperf（Jasper），试试这个：http://jsperf.com/jquery-has-vs/3

$("li").has("ul").children("a").wrapInner("<span />");

感谢你指出Jasper。在选择器中不使用选择器方法通常会更快，而是使用实际方法，例如.has而不是：has或.eq而不是：eq

编辑：但是，并非总是...... http://jsperf.com/recursive-text-wrap似乎赞成我的第一个

环绕每个父文本的跨度

2 个答案: