3

div の html コンテンツを変更する方法を知りたいです。

これが出発点です。

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

ページ上の出力:

りんご
バナナ
いちご

出力は次のように変更する必要があります。

ネコ
イヌ
魚
…とか、こんな感じ。

.each() などを使用してクラス「果物」を反復処理する必要があると思います。単一の要素または単一の div のコンテンツを変更する方法は知っていますが、同じクラスが複数回ある場合にどのように機能するかわかりません。

class="フルーツ"
class="フルーツ"
class="フルーツ"
....

お役に立てれば幸いです。

4

3 に答える 3

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

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

動物を配列に格納し、セレクターのコールバックで
ループし、現在のインデックス( )に一致する のインデックスを返すことでテキストを変更します。.text().fruitsanimalsianimals[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 デモ

于 2015-01-23T00:43:30.653 に答える
3

ロコはjQueryで答えを提供しました..

このような単純なタスクに jQuery を使用する必要はありません。ここではプレーンな JavaScriptを使用しています。(フィドル)

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++];

ベンチマーク jQuery vs JavaScript vs Roko's JavaScript

それが役に立てば幸い！

于 2015-01-23T00:47:43.083 に答える
1

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

于 2015-01-23T00:50:27.113 に答える