将每个字母分别放在给定的div中 [英] Put each letter in given div in separate span

问题描述

以下div包含一些文本和标签.我想将<span>标记添加到div中的每个字母.

The following div contains some text and tags. I want to add <span> tag to every letter in the div.

<div id="text">Hello, <span class="name">John</span></div>

我需要以下输出:

<div id="text">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
  <span>,</span>
  <span class="name">J</span>
  <span class="name">o</span>
  <span class="name">h</span>
  <span class="name">n</span>
</div>

或

<div id="text">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
  <span>,</span>
  <span class="name">
     <span>J</span>
     <span>o</span>
     <span>h</span>
     <span>n</span>
  </span>
</div>

大多数人回答说我还没有尝试任何东西.对于所有人，如果代码中不存在dos，我都有解决方案.在发布问题之前，我已经完成了以下操作.

Guys most of your reply says that I haven't tried anything. For all you I have solution if the dosn't exist in the code. I have done the below even before posting the question.

<div id="text">Hello, John</div>

答案:

<div id="text">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
  <span>,</span>
  <span>J</span>
  <span>o</span>
  <span>h</span>
  <span>n</span>
</div>

使用的JavaScript:

Javascript used:

var obj=$('#text');
var text=obj.text();
text=text.split("");
var parsed="";
obj.empty();
for(var i=0; i<text.length; i++)
{
var tag=document.createElement('span');
tag.setAttribute('class','vtag');
tag.innerHTML=text[i];
obj.append(tag);
}

推荐答案

您可以尝试执行以下操作: http: //jqversion.com/#!/LKQqeGh (使用jQuery)

You can try something like this: http://jqversion.com/#!/LKQqeGh (with jQuery)

var $div = $('#text').clone().html('');
$('#text').contents().each(function(){
  var spanClass = '';

  if ($(this).is('span')) {
    spanClass = $(this).attr('class');
  }

  $textArray = $(this).text().split('');

  for (var i = 0; i < $textArray.length; i++) {
    $('<span>').addClass(spanClass).text($textArray[i]).appendTo($div);
  }
});

$('#text').replaceWith($div);

这篇关于将每个字母分别放在给定的div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！