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

Posted 2023-05-09

【中文标题】棘手的 jQuery DOM 操作（包装文本）

【英文标题】：Tricky jQuery DOM Manipulation (Wrapping text)

【发布时间】：2011-09-20 23:00:17

【问题描述】：

我有一些这样的 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() 函数只处理标签节点而不是文本节点。 :(

【问题讨论】：

我确定您尚未创建此标记，但使用 <ol> 将是正确的选择...

我同意，它不能解决您的问题，但看起来使用正确的标记来创建列表会让您的生活变得更轻松。

是的，不是我的标记。此外，它们并不是真正的要点，但为了简单起见，我将问题抽象为这一点。 <span> 实际上是正确的标签。

@Chris An ol 没有要点，它与您的标记完全相同。

@Chris “每个“数字”跨度表示一个项目符号点的开始，”这就是您的 HTML 所代表的内容。很明显，您应该使用ul 或ol。请使用语义 HTML 或更准确地描述您的 HTML 应该做什么。

【参考方案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.

【讨论】：

开头多了一个.point，可以通过在追加+重新创建之前检查point.children().length > 0来避免。

@SalmanA：你是对的，我首先使用index 这样做了，但由于某种原因将其删除。干杯。