在Jquery中，如何將段落文本的一部分包含在span中

Question

如何在span中的段落中包含span之后找到的innerhtml。 通過示例更好地解釋：

<p>foo <span>bar</span> baz</p>

我想得到：

<p>foo <span>bar</span><span> baz</span></p>

baz也可以標記（即可以包含鏈接等）。

我試過了

$(p span).first().contents().filter(function() {
    return this.nodeType == 3;
}).text();

但只給了我第一個跨度的內跨文本......

Answer 1

DEMO

var span = $('p > span:first')[0];
var target = [];
while(span.nextSibling) {
    target.push(span.nextSibling);
    span = span.nextSibling;
}
$(target).wrapAll('<span />');

Answer 2

這可能會奏效

$('<span>').insertAfter('span')
$('</span>').appendTo('p')

您當然希望更具體地針對您的目標。

Answer 3

感謝你的幫助@Sahil Muthoo，@ Saul和@puppybeard，不幸的是我無法得到你建議的答案，所以最后我想出了這個，雖然看起來有點過頭了，但對我的情況有用。

在jsFiddle上觀看現場演示 。

var p = $('p').clone();
p.children('span').first().replaceWith('[split]');
var aParts = p.html().split('[split]');
var newP = $('<p>').text(aParts[0]).append($('p').children('span').first());
if (aParts.length > 1) {
    newP.append($('<span>').html(aParts[1]));
}       
$('p').replaceWith(newP);

清理上述混亂的建議將受到關注。