前提・実現したいこと
jQueryのプラグイン『yycountdown』(https://github.com/yyengine/jquery-yycountdown)を利用してカウントダウンタイマーを設置したのですが、
一文字ごとにCSSで枠をつけたいため
このプラグインで自動出力される文字"000日00時間00分00秒"の部分を、
<span>0</span><span>0</span><span>0</span>
<span class="yyc-day">日</span>
<span>0</span><span>0</span>
<span class="yyc-hou">時間</span>
のように数字部分を一文字ずつ<span></span>で囲むように出力したいです。
発生している問題・試したこと
https://blanche-toile.com/web/change-text-color-jquery-css
↑こちら記事を参考に、
.yyc-dayに対してchildrenメソッドで要素内の全ての子要素を取得するjQueryを記述しましたが、
反映されませんでした。(HTMLは記述前と同じ出力コードでした。)
JSのエラーメッセージは何も出ていません。
<span class="yyc-day">日</span> の自動出力部分を、
<div class="yyc-day">日</div>に変更しても変化はありませんでした。該当のソースコード
jQuery
1window.onload = function() { 2 $(".yyc-day").children().addBack().contents().each(function(){ 3 if (this.nodeType == 3) { 4 $(this).replaceWith($(this).text().replace(/(\S)/g, "<span>$&</span>")); 5 } 6 }); 7};
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/01 15:48 編集