使用jQuery动态更改div内容

这是出发点：

<div id="container">
    <div class="fruits">apple</div>
    <div class="fruits">banana</div>
    <div class="fruits">strawberry</div>
</div>

页面输出：

苹果
香蕉
草莓

输出应更改为：

猫
狗
鱼
……或类似的东西.

我想我必须用.each()或其他东西迭代“水果”这个类.
我知道如何更改单个div的单个元素或内容,但是当你多次拥有相同的类时,我不明白它是如何工作的.

类=“水果”
类=“水果”
类=“水果”
….

希望你能帮忙.

var animals = ["cat", "dog", "fish"];

$(".fruits").text(function(i){
  return animals[i];
});

将动物存放在阵列中,
使用.fruits选择器上的.text()回调循环,并通过返回与当前索引i(animals [i])匹配的动物的索引来修改文本.

如果您有更多的选择器元素而不是数组长度,您可以使用以下命令对结果进行模数化：return animals [i％animals.length];

jsBin demo

由于您不清楚存储动物字符串的位置,
 您也可以使用这个简单的示例来实现您所需要的并且使用data- *属性：

<div class="fruits" data-to="cat">apple</div>
<div class="fruits" data-to="dog">banana</div>

jQuery的：

$(".fruits").text(function(i){
  return $(this).data().to;     // or use: // this.dataset.to;
});

jsBin demo