JQuery一个接一个地显示和隐藏p元素

我试图使用JQuery循环多个p元素来显示和隐藏它们，但我就是无法让它工作。我还尝试了一个for循环。当前显示和隐藏所有p元素，我想一个接一个地显示和隐藏它们。这是我的密码：

HTML

<p hidden="" class="tweet-1">"Lorem Ipsum"</p>
<p hidden="" class="tweet-2">"Lorem Ipsum"</p>
<p hidden="" class="tweet-3">"Lorem Ipsum"</p>

---

我不太明白

但是修复你的js：

var i=0;
$("p").each(function() {
$(".tweet-" + i).show(1000).hide(2000);
i+=1;
});

我认为最好添加一个delay（），比如：

这对我来说很有用：

$("[class^=tweet-]").each(function(index){   
  $(this).delay(500*index).fadeIn();  
});

但是我需要用css display none更改段落中的“hidden”属性

<p class="tweet-1" style="display:none">"Lorem Ipsum 1"</p>
<p class="tweet-2" style="display:none">"Lorem Ipsum 2"</p>
<p class="tweet-3" style="display:none">"Lorem Ipsum 3"</p>

“Lorem Ipsum 1”
“Lorem Ipsum 2”
“Lorem Ipsum 3”

如果希望p元素一次只显示一个，那么实现此功能的最佳方法是使用jQuery。此外，您可能会考虑使用i＝1而不是i＝0，因为您没有一个类“tWeET-0”。

---

谢谢你的回复。我可能不够清楚：我想淡入tweet-1、淡出tweet-1，然后淡入tweet-2、淡出tweet-2等。这种方法是对我尝试的改进，但它仍然同时显示所有p元素。解决了：如果你想要我想要的特定效果（逐个淡入/淡出元素）您需要将索引设置为等于fadeIn（）的和。fadeOut（）。例如（1000*index）.fadeIn（500）.fadeOut（500）；

<p class="tweet-1" style="display:none">"Lorem Ipsum 1"</p>
<p class="tweet-2" style="display:none">"Lorem Ipsum 2"</p>
<p class="tweet-3" style="display:none">"Lorem Ipsum 3"</p>

var i=1;
var arrayOfPromises = [];

$("p").each(function() {

    if (i == 1)
    {
        $(".tweet-" + i).show();
    }
    else
    {
        $.when(arrayOfPromises[i-1]).done(function() {
            $(".tweet-" + i).show();
        });
    }

    arrayOfPromises.push($(".tweet-" + i).hide());
    i+=1;
});