1

div コンテナー (.container) 内で 5 回繰り返したい次の HTML があります。

<div class="block">
   <div class="name">Name</div>
   <div class="content>Content</div>
</div>

jQuery/JS を使用して、for ループを実行すると各ブロックの「名前」と「コンテンツ」を変更できる配列 (または他の種類の組織構造) を作成したいと考えています。

たとえば、次の 2 つの配列があります。

var names = ["Joe","Jane","Bill","Nicole","Dennis"];
var content = ["First content","Second content","Third content","Fourth content","Fifth content"]

一番上の HTML を複製し、ブロックごとに、名前とコンテンツをそれぞれの配列項目に変更したいと考えています。これどうやってするの？

現在、HTML を繰り返すだけのコードがあります。

var row = $('.block');

for(var i = 0; i < 5; i++ )
  $('.container').append(row.clone())
}

編集:複数の配列を作成せずにこれを行うより良い方法はありますか?

4

2 に答える 2

2

ここにあなたの答えがあると思います：

var row = $('.block');

for(var i = 0; i < 5; i++ ){
  var cp = row.clone();
  cp.find('.name').text(names[i]);
  cp.find('.content').text(content[i]);
  $('.container').append(cp);
}

ここでの動作デモ: http://jsfiddle.net/pulkitm/NV2e2/

于 2012-11-21T21:09:13.143 に答える
2

メソッドを使用findして、要素を追加する前に要素の内容を変更できます。ブロックのtext開口部がないことに注意してください。{for

for (var i = 0; i < 5; i++) {
   row.clone()
      .find('.name').text(names[i]).end()
      .find('.content').text(content[i]).end()
      .appendTo('.container')
}

http://jsfiddle.net/SU3vF/

于 2012-11-21T21:10:56.800 に答える