Question

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

这是起点：

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

页面输出：

苹果
香蕉
草莓

输出应更改为：

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

我想我必须在课堂上进行迭代＆＃34;水果＆＃34;用.each（）或其他东西。我知道如何更改单个div的单个元素或内容，但是当你多次拥有相同的类时，我不明白它是如何工作的。

类=＆＃34;水果＆＃34;
类=＆＃34;水果＆＃34;
类=＆＃34;水果＆＃34;
....

希望你能提供帮助。

Answer 1

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

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

将动物存放在阵列中，
通过.text()选择器上的.fruits回调循环，并通过返回与当前索引animals（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

Answer 2

Roko 在jQuery中提供了一个答案，并将其排除在外......

没有必要将jQuery用于这么简单的任务，这里有一个普通JavaScript 。（fiddle）

var pets = [ "cat", "dog","fish" ];
var fruits = document.querySelectorAll(".fruits"); // Partial support in IE8
for( var i = 0 ; i < fruits.length ; i ++ )
    fruits[i].innerHTML = pets[i];

这是@Roko更快的版本。

var pets = [ "cat", "dog", "fish" ],
    fruits = document.getElementsByClassName("fruits"), // Not supported in IE8
    tot = fruits.length,
    i = 0;
for(;i<tot;) fruits[i].innerHTML = pets[i++];

Benchmark jQuery vs JavaScript vs Roko's JavaScript

希望它有所帮助！

Answer 3

使用.each看起来像这样。我已将其设置为使用数组来回切换来保存其他集合。然而，Roko C. Buljan的回答通过避免一些不必要的方法调用以较少的努力完成了同样的事情，所以我肯定会说他是更好的答案。

＆＃13;

var otherVals = ['dog', 'cat', 'fish'];

function go() {
  $('.fruits').each(function(index) {
    var temp = $(this).html();
    $(this).html(otherVals[index]);
    otherVals[index] = temp;
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="fruits">apple</div>
  <div class="fruits">banana</div>
  <div class="fruits">strawberry</div>
</div>
<input type="button" value="go" onclick="go()" />

＆＃13;

使用jQuery动态更改div内容

3 个答案: