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

我的html代码中有一个给定的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>

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秒后第三行，4秒后第四行，等等

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

---

我做错了什么？我应该使用for循环each（）而不是selector+setInterval吗？请转发关键词，以便我可以在相关文档中挖掘。小提琴欣赏~

您的音程正常，请使用附加而不是文本来查看效果。使用

document.ready

而不是

$（“p”）.ready

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

  i = 0;
$(document).ready(function () {
    div1 = $('#div1');
    parry = $("p");
    setInterval(function () {
        div1.append(parry.eq(i++).text() + '<br />')
        if (i > 3) i = 0;
    }, 400);
});

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

  i = 0;
$(document).ready(function () {
    div1 = $('#div1');
    parry = $("p");
    setInterval(function () {
        div1.append(parry.eq(i++).text() + '<br />')
        if (i > 3) i = 0;
    }, 400);
});

i=0；
$（文档）.ready（函数（）{
div1=$（“#div1”）；
帕里=$（“p”）；
setInterval（函数（）{
div1.append（parry.eq（i++）.text（）++'
'）
如果（i>3）i=0；
}, 400);
});

您的时间间隔正在工作，请使用append而不是text查看效果。使用

document.ready

而不是

$（“p”）.ready

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

  i = 0;
$(document).ready(function () {
    div1 = $('#div1');
    parry = $("p");
    setInterval(function () {
        div1.append(parry.eq(i++).text() + '<br />')
        if (i > 3) i = 0;
    }, 400);
});

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

  i = 0;
$(document).ready(function () {
    div1 = $('#div1');
    parry = $("p");
    setInterval(function () {
        div1.append(parry.eq(i++).text() + '<br />')
        if (i > 3) i = 0;
    }, 400);
});

i=0；
$（文档）.ready（函数（）{
div1=$（“#div1”）；
帕里=$（“p”）；
setInterval（函数（）{
div1.append（parry.eq（i++）.text（）++'
'）
如果（i>3）i=0；
}, 400);
});

试试这个

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

检查此处的实时演示

试试这个

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

检查此处的实时演示

（功能下一步（$set，i）{
setTimeout（函数（）{
$set.eq（i）.text（'aaaaahhh…happy！'）；
如果（i<$set.length-1）{
下一个（$set，i+1）；
}  
}, 1000);
//    /\
//——延迟
}（$（'p'），0））；
//  /\    /\
//| | | |--起始索引
//| |------您的元素集

演示：

（下一个函数（$set，i）{
setTimeout（函数（）{
$set.eq（i）.text（'aaaaahhh…happy！'）；
如果（i<$set.length-1）{
下一个（$set，i+1）；
}  
}, 1000);
//    /\
//——延迟
}（$（'p'），0））；
//  /\    /\
//| | | |--起始索引
//| |------您的元素集

---

---

演示：

解释错误。我希望第一个p句被替换，1秒后的第二行，1秒后的第三行，4秒后的第四行。更新我的答案，我希望如果不是你的答案，till会帮助你做到这一点。我从你的小提琴中学到了一点，谢谢Adil的解释错误。我希望第一个p句被替换，1秒后的第二行，1秒后的第三行，4秒后的第四行。更新我的答案，我希望如果不是你的答案，till会帮助你做到这一点。我从你的小提琴中学到了一点，谢谢Adil加入~@Hugolpz我想这就是你想要的。@Hugolpz我想这就是你想要的。我做了。我觉得你的代码更优雅，但我看不出有什么限制。该函数是否永远运行？/你的功能什么时候停止？（注意：我是JS新手）我必须承认，我发现@Yoshi的答案是最优雅的。刚在午餐前准备好，不想浪费：-D。限制是检查对象数组的长度。每次迭代都会传递没有第一个元素的对象，直到所有对象都消失。@Hugoplz，我应用了您建议的编辑，因为它因未知原因被拒绝。我只是没有得到css的东西，因为你没有问它，所以把它漏掉了。我做了。我觉得你的代码更优雅，但我看不出有什么限制。该函数是否永远运行？/你的功能什么时候停止？（注意：我是JS新手）我必须承认，我发现@Yoshi的答案是最优雅的。刚在午餐前准备好，不想浪费：-D。限制是检查对象数组的长度。每次迭代都会传递没有第一个元素的对象，直到所有对象都消失。@Hugoplz，我应用了您建议的编辑，因为它因未知原因被拒绝。我只是没有得到css的东西，因为你没有问它，所以把它漏掉了。更干净更好的工作样本谢谢Yoshi！function+function的call+less&inline注释：对于像我这样的新手来说更好。注意：在我的项目中，我实际上使用了你的代码，但我的begginer友好版本。对我这样的新手来说，你目前的税率太低了。让我们显示在您的答案中，这样begginer和高级用户都会喜欢它[我验证它]。更干净更好的工作示例谢谢Yoshi！function+function的call+less&inline注释：对于像我这样的新手来说更好。注意：在我的项目中，我实际上使用了你的代码，但我的begginer友好版本。对我这样的新手来说，你目前的税率太低了。让我们在您的答案中显示出来，这样begginer和高级用户都会喜欢它[我验证它]。