Splitting Text And Wrapping Each Of The Words In Elements In JQuery

PS: Updated Fiddle Here's a fiddle that wraps text in elements Here's a fiddle trying to split text using commas as delimiters and wrap each of the words in

Solution 1:

I made a try:

$('button').click(function(){    
    var text = $(this).closest('td').contents().eq(0).text().split(",");
    var keep = $(this).closest('td').find(".count");
    var button = $(this).closest('td').find('button');
       for( var i = 0, len = text.length; i < len; i++ ) {
           text[i] = '<span class="new">' + text[i] + '</span>';
       }   
    $(this).closest('td').html(text.join(' ')).append(keep).append(button);  
});

fiddle

Tell me please if it suits you.

Solution 2:

Also made a try

$('button').click(function () {

  var text = $(this).closest('td').contents().eq(0).text().split(','),
      len = text.length,
      result = []; 

for( var i = 0; i < len; i++ ) {
    result[i] = '<span class="new">' + text[i] + '</span>';
}
var keep = $(this).closest('td').find(".count"),
    button = $(this).closest('td').find('button');
$(this).closest('td').html(result.join(' ')).append(keep).append(button);   
});

With Fiddle: Wrap splitted text

Share