將css應用於第n個孩子的單詞

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

變種時間= 300;

$（ '項目'）每個（函數（指數）{

window.setInterval（函數（）{$（」項目：第n個孩子（ 「+（索引+ 1）+」 ）「）.css（」color「，」#FFFFFF「）;}，time * index）; }）;