Question

我希望将每个字符都放在一个字符串中，以便我可以单独为它们设置动画，而无需触及html。

例如：

<h1>I am a title</h1>

目标是捕捉其中的所有字母，以便我可以使它们一个接一个地显示动画和一个递增0.1s的过渡。问题是，我不知道该怎么做！我想我们需要在h1中获取textNode，然后用forEach循环拼接每个角色，但是我不能写它，我不知道这样做的方法，因为我＆＃39 ; ma初学者用jquery。任何人都可以帮我解决这个问题吗？

Answer 1

这样的事情会满足你的需求吗？

$('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 2

您可以尝试以下操作：

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

Answer 3

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 4

首先，您必须获得标题的内容。

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

然后我建议你做一个循环，它会逐字显示你的变量。

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

请尝试做类似的事情，告诉我们你是否成功。

Answer 5

要执行输入效果，您可以从h1中获取字符串，然后使用asnyc循环慢慢重新引入字母。

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 6

这是一种方法：

首先，确保h1为空：<h1></h1>

然后，在内部添加一个字母，只需一个字母：<h1><span>I</span></h1>

根据您的要求为跨度设置动画

然后更改h1的innerHTML，使前面的字母在span之外，下一个字母在span中：

<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;
});

如何使用jquery捕获字符串中的每个字符？

6 个答案: