使用 JQuery 环绕 div 的单个字母

Question

我正在尝试使用 JQuery 在属于给定类的 div 文本的每个字母周围插入 span 元素。 但是我的代码只返回单词，而不是字母。怎么了？

$(function() {
    var title = $(".js-split-text").text();
    var titleText = title.split(" ");
    var newTitle = [];
    var letterCount = 0;
    titleText.forEach(function(el) {
            var titleElement = "<span>" + el + "</span>";
            newTitle.push(titleElement);
            letterCount++;
            if (titleText.length === letterCount) {
                var newTitleText = newTitle.join(" ");
                $(".js-split-text")
                    .html(newTitleText)
                    .css({ opacity: 1 });

                var aniTime = 0;
                var offset = 500;
                $(".js-split-text span").each(function() {
                    var currentSpan = $(this);
                    aniTime += offset;
                    setTimeout(function() {
                        currentSpan.addClass("animate");
                    }, aniTime);
                });
            }
        });
    });

Answer 1

您正在使用此代码将跨度环绕在文本中的单词周围

var titleElement = "<span>" + el + "</span>";

如果你想将跨度包裹在字母周围，你应该进一步将单词拆分成这样的字母

var titleElement = "<span>" + el.split('').join("</span><span>") + "</span>";