jquery wrap div与div

Question

大师，

我有这个。

<td style="width:100px"> 
Queued:465 
Rejects:3897 
Offers:31 
</td> 

而且需要确保它作为

<td style="width:100px"> 
<span class="label">Queued:</span><span class="data">465</span> <br> 
<span class="label">Rejects:</span><span class="data">3897</span><br> 
<span class="label">Offers:</span><span class="data">31</span> 
</td> 

，而不是一个单行（排队：465个不合格品：3897个商情：31），我想这些数字后给予休息（它们是动态的）。排队，拒绝，优惠已修复。

这是我尝试过的。

$('td:contains(Queued:)').html(function() { 
    return $(this).html().replace('Queued:', '<span class="label">Queued: </span>'); 
}); 
$('td:contains(Rejects:)').html(function() { 
    return $(this).html().replace('Rejects:', '<br><span class="label">Rejects: </span>'); 
}); 
$('td:contains(Offers:)').html(function() { 
    return $(this).html().replace('Offers:', '<br><span class="label">Offers: </span>'); 
}); 

Answer 1

$("td").html(function(i, val) { 
    return $.trim(
     val.replace(/[a-z]+/ig, '<span class="label">$&</span>') 
      .replace(/\d+/g, '<span class="data">$&</span>') 
    ).replace(/\n/g, "<br />"); 
}); 

DEMO：http://jsfiddle.net/dfRzY/

Answer 2

你也可以走下来.split路由，而不是正则表达式的路线。

var $td = $("td"), 
    rows = $td.html().trim().split("\n"), 
    html = []; 

for (var x=0; x<rows.length; x++){ 
    var line = rows[x].split(":"); 

    html.push(
    "<span class='label'>"+line[0]+":</span>"+ 
    "<span class='data'>"+line[1]+"</span>" 
); 
} 
$td.html(html.join("<br>")); 

编辑：Fiddle