ah htmlタグ内の特定のコンテンツをラップするためにwrapInner（）を使用する方法は？私はこのようなhtmlコード持っている

Question

：今

<ul class="table"> 
<li>Height: 70cm</li> 
<li>Width: 100cm</li> 
<li>Depth: 400cm</li> 
<li>Color: yellow</li> 
</ul> 

を、私はそれが（中にあるものをスパンタグを挿入し、文字列は常にありますのでご注意「：」）：次のようになりたいと思い

<ul class="table"> 
<li><span class="name">Height:</span> <span class="value">70cm</span></li> 
<li><span class="name">Width:</span> <span class="value">100cm</span></li> 
<li><span class="name">Depth:</span> <span class="value">400cm</span></li> 
<li><span class="name">Color:</span> <span class="value">yellow</span></li> 
</ul> 

私が何かしようとしました：

$('ul.table li').html().replace('<li>', '<li><span class=name>'); 
$('ul.table li').html().replace(':', ':</span><span class=value>'); 
$('ul.table li').html().replace('</li>', ':</span></li>'); 

をしかし、それは動作しませんでした。これはjQueryで可能ですか？たとえば、wrapInner（）や他の同様のメソッドを使用していますか？

EDIT：

だから、サイムVIDASが提供するソリューションは、働いていた：あなたが確認する必要がありhttp://jsfiddle.net/simevidas/gyqCh/

：

$('li', '.table').html(function (i, html) { 
    html = html.split(' '); 
    return '<span class="name">' + html[0] + '</span> <span class="value">' + html[1] + '</span>'; 
}); 

ライブデモ：

$('li', '.table').html(function (i, html) { 
    html = html.split(' '); 
    return '<span class="name">' + html[0] + '</span> <span class="value">' + html[1] + '</span>'; 
}); 

Answer 1

はこの考えてみましょう確かにLIには、その2つの単語の間にあるスペース文字が1つだけ含まれています。

Answer 2

$ .html（）を呼び出すだけでコンテンツが返されますが、コンテンツへの参照はありません。

var myHtml = $('ul.table li').html(); 
myHmtl = myHmtl.replace('<li>', '<li><span class=name>'); 
myHmtl = myHmtl.replace(':', ':</span><span class=value>'); 
myHmtl = myHmtl.replace('</li>', ':</span></li>'); 

$('ul.table li').html(myHtml); 

Answer 3

試してみてください。あなたは、単にこのようにそれを行うことができ

$('.table li').each(function(){ 
    var values = $(this).text().split(':'); 
    $(this).html('<span class="name">'+values[0]+':</span><span class="value">'+values[1]+'</span>'); 
}); 

Answer 4

を：あなたが探していたので

$('ul.table li').each(function(i, elem){ 
    var html = $(elem).html(); 
    var s = html.split(":"); 
    var final = "<span class='name'>" + s[0] + "</span>:<span class='value'>" + s[1] + "</span>"; 
    $(this).html(final);   
}); 

今では以前に動作しませんでした理由の一つでしたあなたの.html()の内部には李がいますが、あなたのセレクタには李が含まれていたので、html()その内部にあるものだけをつかむ。