Целевая одна буква в строке с javascript

Question

Предположим, у меня есть эта строка: «hello» в теге <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> 

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