3

所以这周我一直在涉足 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

4

2 回答 2

5

如果你选择id你需要类似 CSS 的id选择器：

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

按班级选择：

var elems = $('.className');

使用$('#passage')选择器，您最终会得到一个 jQuery 对象，而不是 DOM 节点，因此$('#passage').innerHTML(or 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 小提琴演示。

参考：

于 2012-06-19T23:59:16.220 回答
3

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

对于第二行，请注意，doing$('#passage')返回一个 jQuery 对象，因此您不能在其上使用标准方法。您应该使用 jQuery 方法。的等价物innerHTML是.html()。

因此，您需要执行以下操作：

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

有点难看，但它完成了工作。大卫的回答更有说服力。

于 2012-06-20T00:03:58.853 回答