使用jQuery用span标记包装所有'•'元素

Question

我需要将所有项目符号包含在带有span标记的div中。 •HTML代码为•。

我发现以下代码会执行此操作，但它也会删除div中的所有链接和其他HTML代码。

var $bc = $('#site-nav');
$bc.html($bc.text().split('•').join('<span>•</span>'));

如何在不丢失链接的情况下包装所有项目符号？以下是上述代码的小提琴：

http://jsfiddle.net/76Wvu/6/

谢谢！

Answer 1

您应该text()替换html()

var $bc = $('#site-nav');   
$bc.html($bc.html().split('•').join('<span>•</span>'));

否则你只读取元素的文本内容，该内容不包含任何<a>标记。因此，样式和链接将被删除。

Answer 2

为了避免替换html并可能搞乱事件和数据，我会改为使用wrap()：

http://jsfiddle.net/RDf5m/

$('#site-nav').contents().filter(function() { 
    return this.nodeType == 3 && $.trim($(this).text()) == '•';
}).wrap('<span/>');