Javascript 获取文本（dom元素）并将其放在单独的跨距中，然后使其按字母顺序显示在页面上

目标：

我有来自dom元素的文本，它将每个字符放入一个span中，每个span将按字母顺序显示字母部分有问题

将每个字符放置到单独范围中的代码：

class SplitText{
    constructor(){

    }

    configureDomElement(domElement){

       let splitDomElement = domElement.textContent.split(''),
           span,
           spans = [];

           domElement.textContent = '';

            for(let i = 0; i < splitDomElement.length; i++){
                   span = document.createElement('span');
                   span.textContent = splitDomElement[i];
                   span.style.display ='inline-block';
                   span.id = 'span'+(i+1);

                   if(splitDomElement[i] === ' '){
                       span.style.paddingRight="1rem";
                   }

                   domElement.appendChild(span);
                   spans.push(span);
            };

       return spans;

    };


};


export default SplitText;

类拆分文本{
构造函数（）{
}
配置DomeElement（DomeElement）{
让splitDomElement=domElement.textContent.split（“”），
跨度
跨度=[]；
doElement.textContent=''；
for（设i=0；i

卡在这里： 用于按字母顺序将每个字符和动画放置到屏幕上的代码：

import SplitText from './SplitText';


class IntroAnimations{
    constructor() {

    }

    loadAnimations(){

        //text from dom element: cervini
        let loadingHeading = document.querySelector('#js-loading-heading');

        const configuredLoadingHeading = new SplitText().configureDomElement(loadingHeading);
        let sortedText;

        for(let i = 0; i < configuredLoadingHeading.length; i++){
            sortedText = configuredLoadingHeading[i].textContent.sort();
        }



        TweenLite.set(sortedText, {y: 0, opacity: 0});

        let tl = new TimelineLite();

        tl.staggerTo(sortedText, 4, {y: 0, opacity: 1}, 0.05);
}

};

export default IntroAnimations;

import SplitText from./SplitText'；
课堂介绍动画{
构造函数（）{
}
加载动画（）{
//来自dom元素的文本：cervini
让loadingHeading=document.querySelector（“#js加载标题”）；
const configuredLoadingHeading=new SplitText（）.configuredElement（loadingHeading）；
让分类文本；
for（设i=0；i

---

谢谢大家!

你得到的结果是什么？查看代码，您似乎正在尝试对单个跨度对象进行排序。我建议先对文本进行排序，然后创建span元素。如果没有，您应该能够编写自己的排序函数，该函数接受跨度数组并查看

span.textContent

进行比较。非常感谢。试图使文本保持其顺序，但使每个字符仅按字母顺序显示。您需要按单词

'

拆分，然后将每个单词拆分为字符

'

，然后排序。