jqueryで文字列の各文字を捕捉するにはどうすればよいですか？

Question

文字列内の各文字を取得したいので、htmlに触れることなく個別にアニメーション化することができます。例えば

：私は彼らがアニメーションと0.1秒でインクリメント遷移に次々と表示させることができるように

<h1>I am a title</h1> 

目的は、その中のすべての文字をキャッチすることです。問題は、私はそれをどうするか考えていないということです！私は、h1のtextNodeを取得し、各文字を取得するforEachループでスプライスする必要があると思うが、私はそれを書くことはできません、私はjqueryの初心者ですので、 。誰も私にこのことで助けてくれますか？

Answer 1

タイプオンエフェクトを実行するには、h1から文字列を取り出し、asnycループを使用して文字をゆっくりと再導入することができます。

var text = $('h1').text(); 
 
var pos = 0; 
 
var delay = 200; // milliseconds 
 

 
function typeon() { 
 
    pos++; 
 
    var typedText = text.substr(0, pos); 
 
    $('h1').text(typedText); 
 
    
 
    if (pos < text.length) { 
 
    // call itself after delay, an async loop 
 
    setTimeout(typeon, delay); 
 
    } 
 
} 
 

 
// start 
 
typeon();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>This is a Type-on Effect</h1>

Answer 2

あなたのニーズに合ったものがありますか？

$('h1').text().split(''); // == ['I', ' ', 'a', 'm', ' ', 'a', ' ', 't', 'i', 't', 'l', 'e']; 

$('h1') 
    .text() 
    .split('') 
    .forEach(function(c){ 
    // Do something with each letter 
    }); 

あなたもこのようにjQueryをせずに行うことができた：

document 
 
    .querySelector('h1') 
 
    .textContent 
 
    .split('') 
 
    .forEach(function(c){ 
 
    // Do something with each letter here 
 
    });

<h1>I am a title</h1>

Answer 3

あなたが次のことを試すことができます。

var str=$("h1").text(); 

Answer 4

var h1Content = jQuery("h1").text(); // You may want to use an id or class to have more control over this 
var h1ContArr = h1Content.split(""); // You now have an array holding each character inside <h1></h1> 

今、あなたはループを使用することができますh1ContArr

Answer 5

まずタイトルの内容を取得する必要があります。

var title = document.querySelector('h1').textContent 

次に、変数を手紙で表示するループを実行することをお勧めします。

for (var i = 0; i < title.length; i++) { 
     tmp = title.substring(i); 
     $('#WhereYouDisplay').text(tmp); 
    }; 

成功するかどうかをご確認ください。

Answer 6

ここに1つの方法です：

まず、h1は空であることを確認してください。<h1></h1>

は、それからちょうど1文字で内部のスパンを追加します。<h1><span>I</span></h1>

要件に応じてスパンをアニメ化

そして以前文字がスパンの外側にあるように、H1のinnerHTMLプロパティを変更し、次の文字はスパンである：

<h1>I <span>a</span></h1>

<h1>I a<span>m</span></h1>

<h1>I am <span>a</span></h1>

等。

参照コードは次のとおりです。

var str = "I am a title" 
str.split("").forEach(function (d, idx, arr) { 
    var _retStr = '<h1>' + arr.slice(0,idx).join("") + '<span>' + arr[idx] + '</span><h1>'; 
    $('h1').innerHTML = _retStr; 
});