Javascript 如何在不丢失格式的情况下连续fadeIn（）元素文本（包括嵌套元素）的每个字符？

我的客户强迫我使用他在以前的网站上使用的一些脚本，以缓慢而流畅地加载文章的文本。脚本可以工作，但问题是格式（

）在某个地方丢失了，我三次收集了三个不同的段落，而不是三个不同的段落

HTML

<article id="post-5" class="post-5 page type-page status-publish hentry" style="overflow: hidden; width: auto; height: 400px;">
  <div class="col-6 column">                      
    <p><strong>Je mi přes 40 a jsem žena.</strong></p>
    <p><strong>Snažila jsem se zařadit, zmoudřet a mít klid. Nepodařilo se.</strong></p>
    <p style="text-align: justify;">Teď se už předělávat nehodlám. A víte co? Strašně si to užívám. Prozkoumávám svou zběsilost v srdci, ženskou marnivost i potřebu mít věci pod kontrolou. Zjistila jsem, že svět je báječné místo k žití, že život není vždycky fér, ale c´est la vie, že být sexy neznamená být krásná, že být úspěšná, neznamená být chytrá, že když se člověk nebere smrtelně vážně, tak je to vlastně skvělá jízda a že můj “bucketlist” je zatraceně dlouhý. Také, že když se nám “povedou” děti, věříme na geny, ale když jsou děti svérázné a my čelíme neustále zvednutému obočí okolí a máme pocit selhání – je lepší nechat to být a doufat, že se dobré geny nakonec “proberou”, protože to jediné, na čem opravdu záleží, jsou hodnoty a důvěra v sebe i svět okolo nás, neopomíjet tu krásu a čistotu, která dětství provází, tu lásku, kterou jsme schopni získat i dávat a užít si čas, který nám byl dán. Svět je plný silných příběhů a skvělých lidí a já jsem se rozhodla, že v čase, který mi byl vyměřen, je chci potkávat, chci se jimi inspirovat a tuto inspiraci předávat dál.</p>                  
  </div>
</article>

您可以看到它对文本的作用。非常感谢您的帮助。
使用.text（）获取文本，而不是html。Use.html（）

给出了三个结果，而不仅仅是一个

如果要使用相同的效果，则必须完全修改脚本

（…）问题是格式（
）丢失在某处（…）

.text（）
方法返回元素（及其子体）的纯文本，不带标记。

要获取包含标记的文本，jQuery有一个
.html（）
方法。但是，这也不适用于您的代码（除非使用）。这是因为您正在将文本分解为单个字符：

var arrayTitle = title.split('');

然后将所有字符包装成
：

（…）我把三个不同的段落都放在一起三次了

这是这些行的结果：

var header = $('.post-5 div p');
var title = header.text();

这里实际发生的是，
标题
指向一个包含所有
元素的对象。

标题是从该对象内的所有元素中提取的文本。

因此，
标题
（每个
）中的每个项目都会被所有三个
元素的文本填充


解决方案
您需要循环使用
元素来分别处理它们：

$('.post-5 div p').each(function(){
    // $(this) points to the current <p> element instead of all:
    var header = $(this);
    // ...
});

考虑到它与静态HTML标记一起工作，这是对代码的快速修复

（清洁工）


另一个解决方案
为了使代码能够处理包含多个嵌套标记的内容，首先应该将文本和元素分开，使标记保持完整。

可以使用
.contents（）
（jQuery）和
nodeType
（javascript）来完成

.contents（）
返回子元素数组，对于该HTML示例：

Hello <b>World</b> <span>Foo Bar</span>

然后，只有当
节点类型===3
时，才可以循环遍历该数组并将字符包装到
，否则再次为该节点运行函数：

function spanifyText(el){
    $(el).contents().each(function(){
        // check if the element is not a text node:
        if(this.nodeType !== 3){
            // not a text node, run method again for that element:
            return spanifyText(this);
        }
        // it's a text node. Process it:
        $(this).replaceWith('<span class="fade">'+$(this).text().split('').join('</span><span class="fade">')+'</span>');
    });
}
spanifyText('.post-5 div p');
// after processing, hide each character and fade it:
$('.fade').hide().each(function(i){
    $(this).delay(i*30).fadeIn(function(){
        // unwrap the character after animation, so that it is no longer inside a <span>:
        $(this).contents().unwrap();
    });
});

函数spanifyText（el）{
$（el）.contents（）.each（函数（））{
//检查元素是否不是文本节点：
if（this.nodeType！==3）{
//不是文本节点，请再次为该元素运行方法：
返回spanifyText（此）；
}
//它是一个文本节点。处理它：
$（this）.replaceWith（“”+$（this）.text（）.split（“”）.join（“”）+”）；
});
}
西班牙文（“.post-5 div p”）；
//处理后，隐藏每个字符并使其褪色：
$（'.fade'）.hide（）.each（函数（i）{
$（this）.delay（i*30）.fadeIn（function（）{
//在动画之后展开角色，使其不再位于：
$（this.contents（）.unwrap（）；
});
});



工具书类









好的，我明白了，但我真的不是js的傻瓜，你能帮帮我吗
var header = $('.post-5 div p');
var title = header.text();

$('.post-5 div p').each(function(){
    // $(this) points to the current <p> element instead of all:
    var header = $(this);
    // ...
});

// declare current timeout variable:
var delay = 0;
$('.post-5 div p').each(function(){
    // declare <strong> element as current 'header':
    var header = $(this).find('strong');
    // if it's not found:
    if(!header.length){
        // declare <p> instead as current 'header':
        header = $(this);
    }

    // ... your code ...

    // Then wrap your setInterval with a setTimeout to not fade each <p> at once:
    setTimeout(function(){
        var interval = setInterval(function(){
            // ... your code ...
        }, 30);
    // set timeout on which the current 'header' should start fading:    
    },delay);
    // update delay for the next <p> element:
    delay += 30*arrayTitle.length;
});

Hello <b>World</b> <span>Foo Bar</span>

nodeType:3  |  nodeType:1  |  nodeType:3  |  nodeType:1
 [Hello ]   |   [World]    |     [ ]      |  [Foo Bar]

function spanifyText(el){
    $(el).contents().each(function(){
        // check if the element is not a text node:
        if(this.nodeType !== 3){
            // not a text node, run method again for that element:
            return spanifyText(this);
        }
        // it's a text node. Process it:
        $(this).replaceWith('<span class="fade">'+$(this).text().split('').join('</span><span class="fade">')+'</span>');
    });
}
spanifyText('.post-5 div p');
// after processing, hide each character and fade it:
$('.fade').hide().each(function(i){
    $(this).delay(i*30).fadeIn(function(){
        // unwrap the character after animation, so that it is no longer inside a <span>:
        $(this).contents().unwrap();
    });
});