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

棘手的jQuery DOM操作（包装文本）

1 个答案: