Question

一个有趣的小问题......

尝试循环遍历段落（单词）的子项并逐个着色。

这是一个硬编码的工作版本，其中包含单独元素中的单词： http://jsfiddle.net/JjRHT/25/

使用

window.setInterval(function(){
$(".item:nth-child(1)").css("color", "#FFFFFF");
}, 1000);

只是为了展示我正在尝试的东西......显然不是要走的路！

所以 - 我可以选择一个段落的每个孩子吗？以及如何正确地进行循环 - 稍微延迟......

史蒂芬

编辑：

我找到了一个jquery plugin，它将文本拆分成为css准备好的单词：

<p class="word_split">Don't break my heart.</p>
<script>
$(document).ready(function() {
  $(".word_split").lettering('words');
});
</script>

将生成：

<p class="word_split">
  <span class="word1">Don't</span>
  <span class="word2">break</span>
  <span class="word3">my</span>
  <span class="word4">heart.</span>
</p>

Answer 1

这里的主要问题是你不能将样式应用于段落的单词。

如果要为单词（而不是整个元素）着色，则必须从段落中提取单词。

这会将段落分为两部分，并为每个部分提供不同的颜色：

var tokens = $paragraph.text().split(' ');
var i=0;
window.setInterval(function(){
       i = (i+1)%tokens.length;
       $paragraph.html( '<span class=onecolor>'+tokens.slice(0, i).join(' ')+'</span>'
           + ' <span class=othercolor>'+tokens.slice(i, tokens.length).join(' ')+'</span>');
}, 1000);

示范：http://jsfiddle.net/CcBLr/1/

编辑：

假设你想要对你的话做出具体的事情（例如，你说，不同的延迟），你可以这样做准备：

var tokens = $paragraph.text().split(' ');
var spans = tokens.map(function(t){return '<span>'+t+'</span>'});
$paragraph.html(spans.join(' '));
var $words = $paragraph.children('span');

$words现在是段落中单词的集合，但您可以在其上应用样式。例如：

$words.each(function(){
   var $word = $(this);
   setTimeout(
   ...

Answer 2

http://jsfiddle.net/JjRHT/38/

这里有延迟

修改：更新后的版本 http://jsfiddle.net/JjRHT/38/

Answer 3

延迟很小，就像你要求的那样：

var delay = 300; // delay in milliseconds

$(".item").children().each(function(index) {
    setTimeout(function() {
        $(this).css("color", "#FFFFFF");
    }, index*delay);
});

Answer 4

你只需要在setInterval上调用就不需要循环，因为setInterval每次都会自动调用该函数，所需要的只是增加修饰符。

检查此http://jsfiddle.net/JjRHT/39/

Answer 5

var time = 300;

$（＆＃39; .item＆＃39;）。each（function（index）{

window.setInterval（函数（）{$（＆＃34; .item：第n个孩子（＆＃34; +（索引+ 1）+＆＃34）＆＃34）的CSS（＆＃。 34; color＆＃34;，＆＃34; #FFFFFF＆＃34;）;}，time * index）; }）;

将CSS应用于第n个孩子的话

5 个答案: