Jquery 如何在某些列表项后显示4段不同的文本并重新开始

我想定义大约4个不同的引号（新文本1、新文本2、新文本3和新文本4），并将它们显示在具有特定类（培训）的listitems中。我希望保留1、2、3和4的加载顺序，然后重新开始

我尝试过使用css并编写如下内容：

    .training:nth-child(1) p::after {content: " New text 1";}
    .training:nth-child(2) p::after {content: " New text 2";}
    .training:nth-child(3) p::after {content: " New text 3";}
    .training:nth-child(4) p::after {content: " New text 4";}

但这不起作用，因为在列表下面我调用了一段jQuery，它实际上向包含的div添加了一个属性

我尝试添加一个空范围，使用jQuery并执行以下操作：

    <script>
    $(function() {
        var addition = new Array(" New text 1", " New text 2", " New text 3", " New text 4"),
        randno = addition[Math.floor( Math.random() * addition.length )];
        $('.training span').text(randno);
    });
    </script>

$（函数（）{
var AD加法=新数组（“新文本1”、“新文本2”、“新文本3”、“新文本4”），
randno=加法[Math.floor（Math.random（）*addition.length）]；
$（'.training span'）.text（随机编号）；
});

这很接近，但它在每个列表项中提供相同的文本，我需要它们以连续顺序（1,2,3,4,1,2,3,4等）成为完整数组

有人知道怎么做吗

现行守则如下：

    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text.</p></li>

现有变量文本

现有变量文本

现有变量文本

现有变量文本

现有变量文本

现有变量文本

现有变量文本

现有变量文本

现有变量文本

现有变量文本

这就是需要展示的内容：

    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text. New text 1</p></li>
    <li class="training"><p>Existing variable text. New text 2</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text. New text 3</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text. New text 4</p></li>
    <li class="training"><p>Existing variable text. New text 1</p></li>
    <li class="tournament"><p>Existing variable text.</p></li>
    <li class="training"><p>Existing variable text. New text 2</p></li>
    etc.

现有变量文本

现有变量文本。新案文1

现有变量文本。新案文2

现有变量文本

现有变量文本。新案文3

现有变量文本

现有变量文本。新案文4

现有变量文本。新案文1

现有变量文本

现有变量文本。新案文2

等

---

有人有主意吗？

你可以这样做：

$(function() {
  var addition = new Array(" New text 1", " New text 2", " New text 3", " New text 4")
  $('.training span').text(function() {
    var randno = addition[Math.floor(Math.random() * addition.length)];
    return randno;
  });
});

请注意，您的html不包含任何

，因此我已将它们添加到您的

li.training

工作示例

$（函数（）{
变量添加=新数组（“新文本1”、“新文本2”、“新文本3”、“新文本4”）
$（'.training span'）.text（函数（）{
var randno=addition[Math.floor（Math.random（）*addition.length）]；
返回randno；
});
});


现有变量文本



现有变量文本



现有变量文本



现有变量文本



现有变量文本



现有变量文本



现有变量文本



现有变量文本



现有变量文本



现有变量文本

嘿，好极了@Carsten。又快到了。。。有没有一种方法可以让nót随机化，但顺序相同：1,2,3,4,1,2,3,4,1,2,3,4，etc@KestonPollard打开最后一个示例，看看js部分ThereNoProblem@KestonPollard