3

ですから、今週はjQueryに少し手を加えています。私が現在取り組んでいるワードプレスのテーマにいくつかのクールなものを追加しようとしています。

この素晴らしいサイトの助けを借りて、私は特定のdivの数字の周りにスパンをラップするために次のJSを受け取りました。より多くの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')と、DOMノードではなくjQueryオブジェクトが生成されるため、$('#passage').innerHTML（またはelem.innerHTML）はエラーを返します：Uncaught TypeError: Cannot call method 'replace' of undefinedChromium19で。

これを回避するには、次のコマンドを使用して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')。

2行目では、実行$('#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 に答える