jquery - 在 li 标签内包装锚链接和文本节点（不包括 ul 标签）？

Question

我有这样的事情：

<li>
  <a></a>
  "(1)"
  <ul></ul>
</li>

我希望它最终是这样的：

<li>
  <span>
    <a></a>
    "(1)"
  </span>
  <ul></ul>
</li>

如何做到这一点？

Answer 1

$ul = $('li ul');
$('li ul').remove();
$('li').wrapInner('<span>');
$('li').append($ul);

作品。请参阅http://jsfiddle.net/Lhg32/（感谢您的评论！）

Answer 2

var content = $('li').clone(true),
         ul = content.children('ul').remove();

$('li').html($('<span />').append(content.contents()).append(ul));

小提琴

Answer 3

http://jsfiddle.net/lamarant/XjQek/

HTML

<ul>
    <li>This is Item 1
        <ul>
            <li>Item 1 Sub 1</li>
            <li>Item 1 Sub 2</li>
            <li>Item 1 Sub 3</li>
        </ul>
    </li>
    <li>This is Item 2
        <ul>
            <li>Item 2 Sub 1</li>
            <li>Item 2 Sub 2</li>
            <li>Item 2 Sub 3</li>
            <li>Item 2 Sub 4</li>
        </ul>
    </li>
</ul>

Javascript

$('ul li').not('ul ul li').each(function () {
        var $clone = $(this).clone(true);
        var $origUL = $('ul', $(this)).first();
        var $newUL = $('<ul></ul>');
        $newUL.html($origUL.html());
        $clone.children('ul').remove();
        $(this).html('').append($('<span>' + $clone.html().trim() + '</span>')).append($newUL);
    });

结果

<ul>
    <li><span>This is Item 1</span>
        <ul>
            <li>Item 1 Sub 1</li>
            <li>Item 1 Sub 2</li>
            <li>Item 1 Sub 3</li>
        </ul>
    </li>
    <li><span>This is Item 2</span>
        <ul>
            <li>Item 2 Sub 1</li>
            <li>Item 2 Sub 2</li>
            <li>Item 2 Sub 3</li>
            <li>Item 2 Sub 4</li>
        </ul>
    </li>
</ul>

Answer 4

尝试这个

$('li a').before('<span>');
$('li ul').before('</span>');

希望这可以帮助！