使用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小提琴演示.

参考文献:

• jQuery选择器.
• html().