1

如何创建一个将内容包装在两个元素之间的元素？

这是我正在处理的代码的简化示例：

<p>
Some text some text <span class="foo">some more text</span> additional text.
</p>
<p>
I am bad at coming up with <span class="foo">fake text</span>, I should have looked it up lorem ipsum somewhere.
</p>

我想要的是第一个跨度结束和第二个跨度开始之间的所有文本都被包裹在一个 div 中，这样我就可以例如为文本着色不同。

这样的事情可能吗？如果没有，有什么聪明的方法可以解决这个问题吗？

编辑：我不完全确定我希望代码在一天结束时如何显示。我只关心结果，即我能够将特定样式应用于跨度之间的文本，尽管它们有不同的父级。例如，如果我可以设置文本并在其周围加上边框，那将是非常棒的，这样最终结果看起来像这样：

一些文字 一些文字 一些文字

------------------------------
|additional text              |
|I am bad at coming up with   |
-----------------------------

假文本，我应该在某个地方查找 lorem ipsum。

4

1 回答 1

2

这太可怕了，但这是我能想到的最好的：

$('p').each(function(i){
    var that = $(this),
        foo = that.find('.foo');
    if (i==0){
        var tN = foo[0].nextSibling;
        $('<span />',{class : 'fooSibling', text: tN.nodeValue}).insertAfter(foo);
    }
    else if (i==1){
        var tN = foo[0].previousSibling;
        console.log(tN,tN.nodeValue);
        $('<span />',{class : 'fooSibling', text: tN.nodeValue}).insertBefore(foo);
    }
    this.removeChild(tN);
});

JS 小提琴演示。

稍微改进，稍微不那么可怕：

$('p').each(function(){
    var that = $(this),
        foo = that.find('.foo');
    if (that.next().find('.foo').length){
        $(foo[0].nextSibling).wrap('<span class="fooSibling"></span>')
    }
    else if (that.prev().find('.foo').length) {
        $(foo[0].previousSibling).wrap('<span class="fooSibling"></span>')
    }
});

JS 小提琴演示。

于 2013-03-11T19:47:47.880 回答