解决方法
替换
HTML将导致事件处理程序被绑定并替换元素的整个文本将导致HTML标记丢失.最好的方法是使任何HTML保持不变,仅操纵匹配元素的第一个文本节点.要获取该文本节点,可以使用
.contents()和
.filter()：
function wrapFirstWord () {
// Select only the first text node
var node = $("div").contents().filter(function () {
return this.nodeType == 3;
}).first(),// Get the text...
text = node.text(),// ... and the first word
first = text.slice(0,text.indexOf(" "));
if (!node.length)
return;
// Remove the first word from the text
node[0].nodeValue = text.slice(first.length);
// Add it back in with HTML around it
node.before('<span>' + first + '</span><br/>');
};
工作演示：http://jsfiddle.net/9AXvN/
使用这种方法将确保操纵第一个单词将不会对元素的其余内容产生不必要的副作用.
您可以轻松地将其作为jQuery的扩展名,其中包含要包装的单词数量的可选值：
$.fn.wrapStart = function (numWords) {
var node = this.contents().filter(function () {
return this.nodeType == 3
}).first(),text = node.text(),first = text.split(" ",numWords).join(" ");
if (!node.length)
return;
node[0].nodeValue = text.slice(first.length);
node.before('<span>' + first + '</span><br/>');
};
