1

html DOM ノード内のすべての要素を ID を持つスパンに分割したいと思います。次に例を示します。

私が要素を持っているとしましょう:

<div>
<h1>Header</h1>
<h2>header2</h2>
<p class="test">this is test p</p>
</div>

結果は次のようになります。

<div>
<h1><span id="1">Header</span></h1>
<h2><span id="2">header2</span></h2>
<p class="test"><span id="3">this</span><span id="4">is</span><span id="5">test</span> <span id="6">p</span></p>
</div>

助けてくれてありがとう

たとえば、ネストされた画像がある場合にも機能するはずです。

<div>
<h1>Header</h1>
<h2>header2</h2>
<p class="test"><img alt="test alt" />this is test p</p>
</div>

そして結果：

<div>
<h1><span id="1">Header</span></h1>
<h2><span id="2">header2</span></h2>
<p class="test"><img alt="test alt" /><span id="3">this</span><span id="4">is</span><span id="5">test</span> <span id="6">p</span></p>
</div>
4

2 に答える 2

7

jsBin デモ

各単語を次のようにラップすると、次のようになります。

var c = 0;                                // create a counter
$('div > *').each(function(){
    var text = $(this).html().split(' '), // split your text strings
        len = text.length,                // get lenght of splitted parts
        result = [];                      // create array
    for( i=0; i<len; i++ ) {              // looping 'len' times....
        result[i] = '<span id="'+( ++c )+'">' + text[i] + '</span>';  // populate array
    }
    $(this).html(result.join(' '));       // apply edits
});
于 2012-09-25T21:09:02.650 に答える
0 
var str = $('.test').text();
var result = "";
str = str.split(" ");
$.each(str,function() {
   result += '<span>' + this + '</span>';
});
$('.test').html($(result));
于 2012-09-25T21:11:59.047 に答える