DOM操作の簡略化:

Node内の文字列を一文字ずつ<span>で囲む

指定したNode内の文字列を一文字ずつ<span>で囲んで差し替える。
$aniTextRdmFade()$aniTextRise()$aniTextLR()でも使用している。

String1
Nodeをidで指定 Nodeを渡すのは不可
String2
改行コードの処理タイプを指定 省略した場合は、改行コードは無視する
br = <br>を差し込む ・ flex = widthが100%の<span>を差し込む
●必須引数 ●オプション引数(省略可能)

記述例

$charToSpan('photos', 'br')
$charToSpan('photos')

戻り値

<span>に変換した数を数値で返す。

注意点

半角スペースや &emsp; などの実体文字参照も一文字として処理される。

動作サンプル

Node内の文字列を一文字ずつ<span>で囲んで差し替える。

Node内の文字列を一文字ずつ<span>で囲む
Sass : #sample1 > span { &:nth-child(3n+1) { color: #8eb8bd } //ブルー &:nth-child(3n+2) { color: #bdb88e } //ゴールド &:nth-child(3n+3) { color: #bd8e9e } //レッド }
Javascript : var excNum=$charToSpan('sample1');

Node内の文字列を一文字ずつ<span>で囲んで差し替える。

Node内の文字列を
一文字ずつ<span>で囲む
Sass : #sample2 > span { &:nth-child(3n+1) { color: #8eb8bd } //ブルー &:nth-child(3n+2) { color: #bdb88e } //ゴールド &:nth-child(3n+3) { color: #bd8e9e } //レッド }
Javascript : var excNum=$charToSpan('sample2','br'); //改行指定「br」 var excNum=$charToSpan('sample2'); //改行指定は省略

Node内の文字列を一文字ずつ<span>で囲んで差し替える。改行指定は「flex」。

Node内の文字列を
一文字ずつ<span>で囲む
Sass : #sample3 { display: flex; flex-wrap: wrap; justify-content: space-between; & > span { &:nth-child(3n+1) { color: #8eb8bd } //ブルー &:nth-child(3n+2) { color: #bdb88e } //ゴールド &:nth-child(3n+3) { color: #bd8e9e } //レッド } }
Javascript : var excNum=$charToSpan('sample3','flex');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。