使用Jquery向数字添加跨度

Question

所以本周我一直在讨论jQuery。试图为我目前正在制作的wordpress主题添加一些很酷的东西。

在这个精彩的网站的帮助下，我收到了以下JS来包含一个div中的数字。一切都很好，直到我开始实现更多的JS，发现这实际上导致我的其他JS破坏。

//add span to numbers
var elem = document.getElementById('passage');
elem.innerHTML = elem.innerHTML.replace(/\b(\d+)\b/g, '<span>$1</span>');

但是，由于我使用的是jQuery，因此将“document.getElementById”取出并最终得到此结果：

//add span to numbers
var elem = $( 'passage' );
elem.innerHTML = elem.innerHTML.replace( /\b(\d+)\b/g, '<span>$1</span>' );

我认为这样可以解决没有运气的情况。为什么这不起作用的任何想法？感谢

我的最终结果是能够像这个网站那样为他们的圣经经文设置数字样式：http://marshill.com/media/the-seven/lukewarm-in-laodicea-comfort-and-convenience-before-christ#scripture

Answer 1

如果您选择id，则需要类似CSS的id选择器：

var elem = $('#passage');,

按班级选择：

var elems = $('.className');

使用$('#passage')选择器，最终得到的是jQuery对象，而不是DOM节点，因此$('#passage').innerHTML（或elem.innerHTML）会返回错误：Uncaught TypeError: Cannot call method 'replace' of undefined在Chromium 19。

要解决这个问题，您可以使用以下命令“删除”回DOM节点：

elem.innerHTML = $('#passage')[0].innerHTML.replace(/*...*/);

或者改为使用jQuery：

elem.html(function(i,oldHTML){
    return oldHTML.replace( /\b(\d+)\b/g, '<span>$1</span>' );
});​

JS Fiddle demo

参考文献：

• jQuery selectors。
• html()。

Answer 2

对于第一行，在使用id时，您希望在字符串前加一个井号;也就是$('#passage')。

对于第二行，请注意，执行$('#passage')会返回一个jQuery对象，因此您无法在其上使用标准方法。你应该使用jQuery方法。 innerHTML的等效值为.html()。

所以你想要做以下事情：

//add span to numbers
var elem = $( '#passage' );
elem.html(elem.html().replace( /\b(\d+)\b/g, '<span>$1</span>' ));

有点难看，但它完成了工作。 David's answer略显雄辩。