2011-02-09 11 views
5

これは簡単な作業でなければなりませんが、最後の単語の見出しを選択してスパンで折り返してスタイルの変更を追加する際に問題が発生しています。ここでjQueryを使用して要素の内部テキストの最後の単語の周りにスパンを折り返すにはどうすればよいですか?

は、私がこれまで

$('.side-c h3').split(/\s+/).pop().wrap('<span />'); 

すべてのヘルプは大幅に

+1

あなたはおそらくすでにこれを通じ考えたが、多くのWebプログラミング言語はに対処するための多くの高レベルの機能を持っているので、おそらく、このサーバー側を行うために容易になるだろうテキスト操作、jQueryはDOMノードを扱うためのものです(Stephen氏のように)。 – eykanal

+0

他の開発者が使う種類のjQueryプラグインをビルドしていない限り、私は@eykanalと同意します。 – Stephen

答えて

15

をいただければ幸いしている問題は、jQueryのオブジェクトはDOMノードを包むことであるものです。要素の各単語はDOMノード自体ではないので、テキストを分割して再結合するにはもう少し作業が必要です。また、jQueryによって選択されている複数のノードを考慮する必要があります。これを試してみてください:

$('.side-c h3').each(function(index, element) { 
    var heading = $(element), word_array, last_word, first_part; 

    word_array = heading.html().split(/\s+/); // split on spaces 
    last_word = word_array.pop();    // pop the last word 
    first_part = word_array.join(' ');  // rejoin the first words together 

    heading.html([first_part, ' <span>', last_word, '</span>'].join('')); 
}); 
+0

それはちょっと仕事です!それはページのすべての見出しを書き換えます –

+0

ああ、あなたは複数の '.side-c h3'を持っていますか?私は私の答えを書き換えます。 – Stephen

+0

最終更新。あなたはこの新しいサンプルと一緒に行くのが良いはずです。あなたがこれを説明したければ教えてください。 – Stephen

0

まあ、これは特に簡単ではありません。これを行うには、最もオーソドックスな方法はDOMNode.splitTextである:

$('.side-c h3').each(function(){ 
    var oldNode = this.firstChild, 
     newNode = oldNode.splitText(oldNode.data.lastIndexOf(' ') + 1), // don't wrap the space 
     span = document.createElement('span'); 

    this.replaceChild(span, newNode); 
    span.appendChild(newNode); 
}); 

See jsfiddle

2

これはそれをしない:

$('.side-c h3').each(function(){ 
    var $this = $(this), text=$this.text().trim(), words = text.split(/\s+/); 
    var lastWord = words.pop(); 
    words.push('<span>' + lastWord + '</span>'); 
    $this.html(words.join(' ')); 
}); 
関連する問題