jquery - 棘手的 jQuery DOM 操作(文本换行)

Question

我有一些这样的 HTML:

<span class="number">1.</span>Lorem ipsum dolor. <span class="special">Sit amet.</span> Consectur adipisicing elit. 
<span class="number">2.</span>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

我想要的是这样的:

<span class="point"><span class="number">1.</span><span class="text">Lorem ipsum dolor. <span class="bar">Sit amet.</span> Consectur adipisicing elit.</span></span>
<span class="point"><span class="number">2.</span><span class="text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></span>

基本上，每个“数字”范围都表示项目符号点的开始，该点要么运行到下一个“数字”范围，要么运行到 HTML 末尾(如果没有更多“数字”范围)。在点内，可能有附加的 HTML 标签和纯文本。我想将每个项目符号点包装在一个跨度中，并将项目符号点内的文本包装在一个跨度中。不幸的是，这看起来可能很痛苦。

知道如何使用 jQuery(或者其他解决方案)来解决这个问题吗？

编辑:弄清楚了。 jQuery 有一个适合这里的 .nextUntil() 函数:http://api.jquery.com/nextUntil/ 之后，可以使用 .wrap() 完成包装:http://api.jquery.com/wrap/

再次编辑:实际上，我认为.nextUntil()函数只处理标签节点而不是文本节点。 :(

Answer 1

这有效...

var point = $('<span class="point" />');

$('body').contents().each(function() {

    var element = $(this);

    if (point.children().length > 0 && element.is('span.number')) {
        $('body').append(point);
        point = $('<span class="point" />');
    } 

    point.append(element);

})

$('body').append(point);

jsFiddle .