Question

我遇到以下问题，我需要分隔一个范围中的每个字符，并根据字符使用javascript分配一个类。

我有这个：

<div>1111222</div>

，最终结果应为：

<div>
   <span class="e1">1</class>
   <span class="e1">1</class>
   <span class="e1">1</class>
   <span class="e1">1</class>
   <span class="e2">2</class>
   <span class="e2">2</class>
   <span class="e2">2</class>
</div>

这是我使用的代码：

var str = $('.test').text();
var result = "";
str = str.split("");
var h = $(this).text();
$.each(str,function(){
if( h = 1)
{
    result += '<span class="e1">' + this + '</span>';
}
else if ( h = 2)
{
    result += '<span class="e2">' + this + '</span>';
}
});
$('.test').html($(result));

由于

Answer 1

var spanVals = $('div').text().split('');
for(var i = 0; i < spanVals.length; i++) {
    var span = $('<span>').addClass('e'+spanVals[i]).text(spanVals[i]);
    $('div').append(span);
}

Answer 2

假设您有对div的引用，那么以下应该完成这项工作：

var div = document.getElementById('d0'); // id of div

// Get the text
var text = div.textContent;

// Clear the div content
div.innerHTML = '';

// Insert spans around characters
text.split('').forEach(function(c){
  var node = document.createElement('span').appendChild(document.createTextNode(c)).parentNode;
  node.className = 'e' + c;
  div.appendChild(node);
});

对于IE 8等旧版浏览器，您需要{em} forEach polyfill。

拆分字母和分配类

2 个答案: