使用jQuery动态更改div内容

Question

我想知道如何更改div的html内容.

这是出发点:

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

页面输出:

苹果
香蕉
草莓

输出应更改为:

猫
狗
鱼
...或者是这样的.

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

class ="fruits"
class ="fruits"
class ="fruits"
....

希望你能帮忙.

Answer 1

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

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

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

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

jsBin演示

由于您不清楚存储动物字符串的位置,
您也可以使用这个简单的示例来实现您所需要的和使用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演示