テキストアニメーション複数対応

Question

前回の質問で<br>はspanで囲わないというのは解決できたのですが
同じクラスが複数有る場合だとeachはcontentsで使っているためすべてのtext_animateクラスから探してきて
とってくるため複数のクラスの配列が処理一つのクラスに同時に出力されるためうまく動きません
プラグイン化、もしくはdate属性を使えばこの問題は解決するかもしれませんが何か良い
解決はないでしょうか？

<p class="text_animate">te<br>st</p>
<p class="text_animate">te<br>st</p>
<p class="text_animate">te<br>st</p>
<p class="text_animate">te<br>st</p>
<p class="text_animate">te<br>st</p>

.text_animate{
    span{
        transition: 1s;
    opacity: 0;
    &.text_animate_on{
        transition: 1s;
        opacity: 1;

    }
    }
    &.text_animate_rotate span{
        transform: rotate(-45deg);
        display: inline-block;
        &.text_animate_rotate_on{
            transform: rotate(0deg);
        }
    }
    &.text_animate_size span{
        font-size: 22px;
        &.text_animate_size_on{
            font-size: 10px;
        }
    }
}

$(function () {
  // 子ノード3つそれぞれに対して処理
  $(".text_animate").contents().each(function (_, node) {
    // 子ノードを一旦DOMツリーから除去
    // 変数`node`はjQueryオブジェクトではないので`node.remove();`とは書けません。
    node.parentNode.removeChild(node);

    // ノードの種類によって条件分岐
    switch (node.nodeType) {
      // テキストノードなら質問文にある処理を適用
      case Node.TEXT_NODE:
        // テキストノードの文字列を取得
        var text_split = node.textContent.split("");

        function animate() {
          text_split.forEach(function (val) {
            $(".text_animate").append("<span>" + val + "</span>");
          });
        }
        animate();
        break;
      // テキストノード以外(HTML要素)ならappendし直す
      default:
        $(".text_animate").append(node);
    }
  });

  // 以下、変更点なし
  $(window).load(function () {
    $(".text_animate span").each(function (index) {
      $(this).css({
        transitionDelay: index * 0.6 + "s"
      }).addClass("text_animate_on");
    });
  });
});

追記:こちらの方法で行けるみたいですが
できるみたいですが処理の内容がいまいちわかりません

$(".text_animate").children().andSelf().contents().each(function () {
		if (this.nodeType == 3) {
			$(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>'));
		}
	});

Answer 1

元のコードを直す方法

「複数のクラスの配列が処理一つのクラスに同時に出力される」原因は、以下の部分です。

$(".text_animate").append("<span>" + val + "</span>");
$(".text_animate").append(node);

APIドキュメントによれば、.append()メソッドは、マッチするすべての要素に対して要素を追加するようになっているので、.each()のループによって複数回.append()が適用されたという寸法です。
$(".text_animate").append()のようにセレクタではなく$(parentNode).append()のようにすれば要素を追加する対象は常に1つなので複数回適用される問題は解決されます。

$(".text_animate").contents().each(function (_, node) {
  var parentNode = node.parentNode;
  parentNode.removeChild(node);
  switch (node.nodeType) {
    case Node.TEXT_NODE:
      var text_split = node.textContent.split("");

      function animate() {
        text_split.forEach(function (val) {
          $(parentNode).append("<span>" + val + "</span>");
        });
      }
      animate();
      break;
    default:
      $(parentNode).append(node);
  }
});

追記のコードについて解説

書いてあるコードを日本語に翻訳すると、セレクタ.text_animateにマッチする要素とその要素の子ノードそれぞれについて、ノードがテキストノードなら、ノードに含まれる文字列の空白文字でない文字すべてを<span>要素で囲ったものに置き換えるといった処理になります。

読み解くのに必要な前提知識は下記があると思います。

• jQueryオブジェクトが持つメソッド.children()、.andSelf()、.contents()はすべてjQueryオブジェクトを返すメソッドです。.children().andSelf().contents()のように続けて書くことをメソッドチェーンと呼びます。
• 3という謎の数値は定数Node.TEXT_NODEのことです。参考: MDNドキュメント
• 文字列が持つメソッド.replace()の引数に与えられている/(\S)/gは正規表現と呼ばれるものです。置き換え後の文字列に含まれる$1は正規表現にマッチした文字に置き換えられます。参考: MDNドキュメント

Comments

[teta]

回答ありがとうございます。
質問なのですが
parentNodeとすると親要素のノードここでは要素毎の.text_animateを返すので個別に処理できるということなのでしょうか？
後、追記の質問の仕方が悪かったです。
.children().andSelf().contents(
この下りなのですがcontestsのみで書かずに.children().andSelf().contents()と書いているのはandSelfで要素ごとに処理し、尚かつ小要素にも適用させるためでしょうか？
.children().andSelf()と書けばこのままでいいがそれだとノードが取得できないのでcontentsを書いているということなのでしょうか？
質問多くてすみません

[reosablo]

1つ目の質問について、その理解で合っていると思います。
ループで走査しているノードは変数`node`に代入されているので、`node.parentNode`でノード毎の親ノードを得られます。
2つ目の質問についても、その通りです。
今回の例であれば`.children().andSelf().contents()`と書かなくても`.contents()`だけで十分です。
`.children().andSelf()`が必要となるのは例えば`<p class="text_animate">t<a href="#">e<br>st</a></p>`のような場合です。
ただし、`.children()`は子要素(要素直下の要素)なので、子孫要素すべてに対応させるために`.find("*")`がよいかもしれません。

[teta]

分かりました。ありがとうございます