javascript - 按时间间隔链接相似元素修改

Question

我的 html 代码中有一个给定的 p 元素列表。在页面加载时，我尝试对每个 <p> 的修改进行排队按给定的时间间隔(1秒)查看元素的内容。

给定 html:

<p>I want to change first!</p>
<p>I want too!</p>
<p>Me 3rd !</p>
<p>Hey, don't forget me!</p>

CSS:

p { padding: 2px 5px 0px 10px; }
.p { color: #999; }
.green { color:green; border-bottom: 1px solid #888; background: #EEE; }

既然我想链式修改，JS应该是什么。字面意思是:第一个p句子首先被CSS/HTML修改，1秒后第二行应该被替换，1秒后第 3 行，4 秒后第 4 行，依此类推

$("p").ready(function(){
    setInterval(function () {
        $('p').text('aaaahhhhh.... happy!')
    }, 1000);
  });

That's fail (fiddle) .

我做错了什么？我应该使用for循环each()而不是selector + setInterval吗？请转发关键字，以便我可以深入研究相关文档。 fiddle 欣赏~

Answer 1

试试这个

$(document).ready(function(){
    var st=null;
    var i=0;
    st=setInterval(function () {
        $('p').eq(i).text('aaaahhhhh.... happy!'); 
        if(i==$('p').length-1)// one less because i initialised by 0.
            clearTimeout(st);
        i++
    }, 1000);
});

在此处查看现场演示 http://jsfiddle.net/gT3Ue/14/