在jQuery中拆分文本并将每个单词包装在元素中答案

【问题标题】：Splitting text and wrapping each of the words in elements in jQuery在jQuery中拆分文本并将每个单词包装在元素中
【发布时间】：2023-03-04 08:11:06
【问题描述】：

PS：更新小提琴

这是一个 fiddle 将文本包装在元素中

这里有一个fiddle 尝试使用逗号作为分隔符来拆分文本，并将<span class="new"/> 中的每个单词换行。谁能告诉我为什么它在 foreach 循环中给了我Uncaught TypeError: undefined is not a function？

我希望输出是

 <td>
     <span class='new'>Text</span>
     <span class='new'>that</span>
     <span class='new'>needs</span>
     <span class='new'>to</span>
     <span class='new'>be</span>
     <span class='new'>wrapped.</span>
     <span class="count">not this</span>
     <button>Wrap</button>
 </td>

代码：

$('button').click(function(){
    var wrap_it = $(this).closest('td').contents().eq(0).text();
    wrap_it = wrap_it.split(',');
    console.log(wrap_it);

    $.each(wrap_it,function(i,k){
      k.wrap('<span class="new"/>');
    })

});

HTML：

<table>
 <tbody>
   <tr>
    <td>1</td>
       <td>Text,that, needs, to, be, wrapped.<span class="count">not this</span><button>Wrap</button>
    </td>
   </tr>
   <tr>
    <td>2</td>
    <td>Text, that, needs, to, be, wrapped.<span class="count">not this</span><button>Wrap</button></td>
   </tr>
  </tbody>
</table>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我试了一下：

$('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

如果适合你，请告诉我。

【讨论】：

我不明白为什么这是公认的答案，因为它不符合 OP 的预期输出。 <span class="count">not this</span> <button>Wrap</button> 已在小提琴中删除。
感谢@matthias_h 的反馈。不确定他是否需要在.count 类中保留按钮和文本。更新了我的答案。

【解决方案2】：

也试过了

$('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);   
});

使用小提琴： Wrap splitted text

【讨论】：