使用Jquery向数字添加跨度

So I have been dabbling around in jQuery a bit this week. Trying to add some cool things to a wordpress theme I am currently working on.

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

With the help of this wonderful site, I received the following JS to wrap a span around numbers in a certain div. All was well until I started implementing more JS to find out this is actually causing my other JS to break.

在这个精彩的网站的帮助下,我收到了以下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>');

However, I was informed since I am using jQuery, to take "document.getElementById" out and end up with this:

但是,自从我使用jQuery后,我被告知要将“document.getElementById”取出并最终得到:

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

I figured this would solve the situation with no luck. Any ideas of why this isn't working? Thanks

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

My end result is to be able to style numbers like this site does for their Bible verses: http://marshill.com/media/the-seven/lukewarm-in-laodicea-comfort-and-convenience-before-christ#scripture

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

2 个解决方案

#1

If you're selecting by the id you need the CSS-alike id selector:

如果您按ID选择,则需要类似CSS的id选择器:

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

To select by class:

要按班级选择:

var elems = $('.className');

Using the $('#passage') selector, you end up with a jQuery object, rather than a DOM-node, so $('#passage').innerHTML (or elem.innerHTML) returns an error: Uncaught TypeError: Cannot call method 'replace' of undefined in Chromium 19.

使用$('#passage')选择器,最终得到一个jQuery对象,而不是DOM节点,所以$('#passage')。innerHTML(或elem.innerHTML)返回一个错误:Uncaught TypeError:不能调用方法'替换'在Chromium 19中的undefined。

To work around that, you can 'drop' back to a DOM-node with:

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

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

Or instead use jQuery:

或者改为使用jQuery:

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

JS Fiddle demo.

JS小提琴演示。

References:

#2

For the first line, when working with ids, you want to prepend the string with a pound symbol; that is, $('#passage').

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

For the second line, note that doing $('#passage') returns a jQuery object, so you can't use standard methods on it. You should be using jQuery methods. The equivalent for innerHTML is .html().

对于第二行,请注意执行$('#passage')会返回一个jQuery对象,因此您无法使用标准方法。你应该使用jQuery方法。 innerHTML的等价物是.html()。

So you would want to do the following:

所以你想要做以下事情:

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

A little ugly, but it gets the job done. David's answer is slightly more eloquent.

有点难看,但它完成了工作。大卫的回答略显雄辩。

#1