スパンタグに要素の各単語をラップする方法は？

Question

$("div.date") 
    .contents() 
    .filter(
     function(){ 
      return this.nodeType != 1; 
     }) 
    .wrap("<span/>"); 

私は新しいですし、そのコードがトリックを行っているだろうと思ったが、それはですべてを包む<span>そうのような：このように見えることになっている2011 </span></div>

<div class='date'><span> 12月22日、：

<div class='date'> 
    <span>Dec</span> 
    <span>22,</span> 
    <span>2011</span> 
</div> 

Answer 1

それはつもりになるのそれより少し複雑です。すべての単語を見つけて要素に追加し直す必要があります。

var words = $("p").text().split(" "); 
$("p").empty(); 
$.each(words, function(i, v) { 
    $("p").append($("<span>").text(v)); 
}); 

Live example

Answer 2

これは達成しようとしていることですか？

<span><div class="date">Dec 22, 2011</div></span> 

その場合：

$('div.date').wrap('<span/>'); 

それとも、これを取得しようとしている。

<span>Dec</span> <span>22,</span> <span>2011</span> 

このような何かはトリックを行うshoul：

var dateInner = $('div.date'); 
var wraps = []; 
$.each(dateInner.text().split(' '), function (key, value) { 
    wraps.push = '<span>' + value + '</span>'; 
}); 

dateInner.html(wraps.join('')); 

Answer 3

var $div = $('.words'); 
var divWords = $div.text().split(/\s+/); 
$div.empty(); 
$.each(divWords, function(i,w){ 
    $('<span/>').text(w).appendTo($div); 
}); 

その後

<div class="words">Why hello there, world!</div> 

あなたはは、この単純なタスクのためのjQueryを必要としない

<div class="words"> 
    <span>Why</span> 
    <span>hello</span> 
    <span>there,</span> 
    <span>World!</span> 
</div> 

Answer 4

になります。 String.prototype.replaceと正規表現は、そのトリックを行う必要があります。

手紙をラップ私はいくつかの簡単なユーティリティ関数を作っ

、単語や行：

/** 
* Wraps a string around each character/letter 
* 
* @param {string} str The string to transform 
* @param {string} tmpl Template that gets interpolated 
* @returns {string} The given input as splitted by chars/letters 
*/ 
function wrapChars(str, tmpl) { 
    return str.replace(/\w/g, tmpl || "<span>$&</span>"); 
} 

/** 
* Wraps a string around each word 
* 
* @param {string} str The string to transform 
* @param {string} tmpl Template that gets interpolated 
* @returns {string} The given input splitted by words 
*/ 
function wrapWords(str, tmpl) { 
    return str.replace(/\w+/g, tmpl || "<span>$&</span>"); 
} 

/** 
* Wraps a string around each line 
* 
* @param {string} str The string to transform 
* @param {string} tmpl Template that gets interpolated 
* @returns {string} The given input splitted by lines 
*/ 
function wrapLines(str, tmpl) { 
    return str.replace(/.+$/gm, tmpl || "<span>$&</span>"); 
} 

使用量は非常に単純です。最初の引数としてラップするために文字列を渡すだけです。カスタムマークアップが必要な場合は、2番目の引数として渡します。$&は、各char/word/lineに置き換えられます。

var str = "Foo isn't equal\nto bar."; 
wrapChars(str); // => "<span>F</span><span>o</span><span>o</span> <span>i</span><span>s</span><span>n</span>'<span>t</span> <span>e</span><span>q</span><span>u</span><span>a</span><span>l</span> <span>t</span><span>o</span> <span>b</span><span>a</span><span>r</span>." 
wrapWords(str); // => "<span>Foo</span> <span>isn</span>'<span>t</span> <span>equal</span> <span>to</span> <span>bar</span>." 
wrapLines(str); // => "<span>Foo isn't equal</span> <span>to bar.</span>" 

Answer 5

Xeon06の優れた答えにちょうど建っています。

私は同じページの同じ要素の倍数に対してこれを行わなければなりませんでした。

$('.element').each(function(){ 
     var words = $(this).text().split(" "); 
     var total = words.length; 
     $(this).empty(); 
     for (index = 0; index < total; index ++){ 
      $(this).append($("<span /> ").text(words[index])); 
     } 
    }) 

Answer 6

jQueryを使用する場合は、thisを試してください。

具体的には、引用の言葉here

に分割する方法の例を見つけることができます。

は、ここでの例です。レタリング（「言葉」）方法：生成されます

<p class="word_split">Don't break my heart.</p> 

<script> 
$(document).ready(function() { 
    $(".word_split").lettering('words'); 
}); 
</script> 

：

<p class="word_split"> 
    <span class="word1">Don't</span> 
    <span class="word2">break</span> 
    <span class="word3">my</span> 
    <span class="word4">heart.</span> 
</p> 

Answer 7

私は各単語に特定のIDを与えるために必要なので、初心者であること、私が以前に発表された答えを研究コード。

$('.mydiv').each(function(){ 
    var words = $(this).text().split(/\s+/); 
    var total = words.length; 
    $(this).empty(); 
    for (index = 0; index < total; index ++){ 
     $(this).append($("<span /> ").addClass("myclass_" + index).text(words[index])); 
     } 
    }) 

出力：それは私のニーズに完璧に動作

<div class="mydiv">bla bla bla</div> 

：から

<div class="mydiv"> 
     <span class="myclass_0">bla</span> 
     <span class="myclass_1">bla</span> 
     <span class="myclass_2">bla</span> 
    </div> 

が始まるブラッドクリスティーズとダニエルTononのコードから始めて、私はこの結果を達成するために.addClassを使用しました。 多分、いくつかの専門のプログラマーがそれを上手く調整することができます！