使用javascript以字符串为目标的一个字母

Question

假设我有以下字符串： “hello”在<span>标记中，我想为每个字母执行一个代码（例如：hide，更改不透明度等）。我怎样才能让这个与JS/jQuery的，而不必这样做：

<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span> 

Answer 1

没有，是的。据我所知，不，每个字母周围的标签都是必要的，但是，是的，你可以用JavaScript来摆动它。这里有一些例子，使用这个概念为每个角色随机应用颜色和大小。

forEach循环方法： JSFiddle

<span>hello</span> 

<script> 

var span = document.querySelector('span') 
var str = span.innerHTML 
span.innerHTML = '' 
str.split('').forEach(function (elem) { 
    var newSpan = document.createElement('span') 
    newSpan.style.color = "#"+((1<<24)*Math.random()|0).toString(16) 
    newSpan.style.fontSize = (Math.random() * (36 - 10) + 10) + 'px' 
    newSpan.innerHTML = elem 
    span.appendChild(newSpan) 
}) 

</script> 

---

setTimeout方法： JSFiddle

<span>hello</span> 

<script> 

var span = document.querySelector('span') 
var str_arr = span.innerHTML.split('') 
span.innerHTML = '' 
var ii = 0 
~function crazy(ii, str_arr, target) { 
    if (ii < str_arr.length) { 
     var newSpan = document.createElement('span') 
     newSpan.style.color = "#"+((1<<24)*Math.random()|0).toString(16) 
     newSpan.style.fontSize = (Math.random() * (72 - 36) + 36) + 'px' 
     newSpan.innerHTML = str_arr[ii] 
     target.appendChild(newSpan) 
     setTimeout(function() { 
      crazy(ii += 1, str_arr, target) 
     }, 1000) 
    } 
}(ii, str_arr, span) 

</script> 

Answer 2

可以在香草的javaScript做到这一点很容易，而不需要像jQuery库。您可以使用split将您的字符串转换为数组。这将每个字母放入数组的索引中。从这里你可以用循环为每个索引（或字母）添加标记。

例如：

var str = "hello"; 
    var res = str.split(''); 

    for(var i = 0; i < res.length; i++){ 
    res[ i ] = '<span>' + res[ i ] + '</span>' 
    } 

Answer 3

你可以做到这一点。

在HTML

<span id="my-text">hello</span> 
<div id="split-span" ></div> 

在Javascript中，

var text = $('#my-text').html().split(''); 

for(var i=0; i<text.length; i++){ 
    $('#split-span').append('<span>'+text[i]+'</span>'); 
}