javascript - 使用javascript定位字符串中的一个字母

Question

假设我有这个字符串:<span> 中的“你好”标签，我想为每个字母执行一个代码(例如:隐藏、更改不透明度等)。我怎样才能用 JS/Jquery 做到这一点而不必这样做:

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

Answer 1

不，是的。据我所知，不，每个字母周围的 span 标记是必要的，但是，是的，您可以在 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>