Динамическое изменение содержимого div с помощью jQuery

Question

Мне интересно, как я могу изменить содержимое html в div.

Это отправная точка:

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

Выход на странице:

яблоко
банан
клубники

Выход должен быть изменен на:

кошка
собака
рыба
... или что-то в этом роде.

Наверное, мне нужно перебирать класс «фрукты» с помощью .each() или что-то в этом роде. Я знаю, как изменить отдельные элементы или содержимое одного div, но я не понимаю, как это работает, когда у вас один и тот же класс несколько раз.

класса = "фрукты"
класса = "фрукты"
класса = "фрукты"
....

Надеются, что вы можете помочь.

Answer 1

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

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

Храните животных в массив
Loop с .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

Роко предоставил ответ в 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 будет выглядеть примерно так. Я установил его для переключения взад и вперед, используя массив для хранения другой коллекции. Тем не менее, ответ Роко К. Булджана в основном делает то же самое с меньшими усилиями, избегая ненужных вызовов методов, поэтому я бы определенно сказал, что это лучший ответ.

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