使用 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() 或其他东西遍历 class "fruits"。我知道如何更改单个元素或单个 div 的内容，但我不明白当您多次使用相同的 class 时它是如何工作的。

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

希望能帮到你。

Answer 1

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

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

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

如果您的选择器元素多于数组长度，您可以使用以下方法对结果取模：return animals[i%animals.length];

jsBin demo

由于不清楚您将 Animals 字符串存储在哪里，
你也可以使用这个简单的例子来实现你所需要的，那就是使用 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 provided an answer in jQuery, with that out of the way..

这么简单的任务没必要用jQuery，这里有plain 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 的回答通过避免一些不必要的方法调用，基本上以更少的努力完成了同样的事情，所以我肯定会说他的答案更好。

var otherVals = ['dog', 'cat', 'fish'];

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

<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()" />

使用 jQuery 动态更改 div 内容

Change div content dynamically with jQuery

html

jquery

html-manipulation