Question

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

以下是我处理的代码的简化示例：

<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。

Answer 1

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

$('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 Fiddle demo

略有改善，但稍微不那么可怕：

$('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 Fiddle demo

在JavaScript / jQuery中包含两个元素之间的元素？

1 个答案: