jQuery,for文を使ってdiv要素を複製したい。

質問させてください。

<div class="box"> <div class="box"> <div class="box"> <div class="box"> をfor文を使って複製し、boxをクリックしたときに.circleクラスをつけたいのですが、どのように書けばいいでしょうか。

<div class="box"></div>

.box {
  height: 200px;
  width: 200px;
  background: pink;
  transition: 2s;
  margin: 10px 10px;

}

.circle {
  border-radius: 50%;
  background: orange;
  transform: rotate(1000deg);
}

<script>
for (let i = 0; i < 10; i++) {
    $('.box').append('<div class="box"></div>');
    $('.box').click(function () {
      $('.box').toggleClass('circle');
    })
  }
</script>

このように書いたのですが、思ったように動いてくれません。
アドバイスください。

行動規範の内容に同意します

回答3件

ベストアンサー

html
1<div class="box"></div>
2
3.box {
4  height: 200px;
5  width: 200px;
6  background: pink;
7  transition: 2s;
8  margin: 10px 10px;
9
10}
11
12.circle {
13  border-radius: 50%;
14  background: orange;
15  transform: rotate(1000deg);
16}
17
18<script>
19  for (let i = 0; i < 10; i++) {
20    $('.box:last').after('<div class="box"></div>');
21  }
22  $('.box').click(function () {
23    $(this).toggleClass('circle');
24  });
25</script>

このように修正すればよいはずです。JQueryのappend関数は、選択した要素の末尾(要素の内側であることに注意)に要素を追加します。今回の場合は要素の後に追加したいので、after関数が適切です。

また、セレクタに:lastをつけたのは1ループにつき要素を1つ増やすためです。倍々に増えていくのが正しい動作ならば消してください。

投稿2019/08/30 16:36

編集2019/08/30 17:03

frodo821

総合スコア322

kei344

2019/08/30 16:57

> タイプ数 forの中で追加するのをやめて $('.box').click(clickListener); とすればタイプ数は減るのでは。

frodo821

2019/08/30 17:01

あ、それもそうですね。多分それが一番タイプ数少ないです。もとのコードコピペして修正しただけなので気づけませんでした。

行動規範の内容に同意します

js
1$( 'body' ).on( 'click', '.box', function () { // 定義時に存在しない要素のイベントを設定
2  $( this ).toggleClass( 'circle' ); // $( this ) でクリックされた要素に限定
3} );
4for ( let i = 0; i < 10; i++ ) {
5  $( '.box' ).eq( -1 ).after( '<div class="box">' + i + '</div>' ); // 最後の要素の後に要素を追加している
6}
7```**動くサンプル：**[https://jsfiddle.net/L54ud98f/](https://jsfiddle.net/L54ud98f/)
8
9---
10
11
12【.after() | jQuery API Documentation】
13[https://api.jquery.com/after/](https://api.jquery.com/after/)
14
15【.eq() | jQuery API Documentation】
16[https://api.jquery.com/eq/](https://api.jquery.com/eq/)
17
18【.on() | jQuery API Documentation】
19[https://api.jquery.com/on/](https://api.jquery.com/on/)
20
21【jQuery： 文書ツリー上に存在しない要素に対してイベントリスナーを追加するには？（on） - Build Insider】
22[https://www.buildinsider.net/web/jqueryref/017](https://www.buildinsider.net/web/jqueryref/017)

投稿2019/08/30 16:33

kei344

総合スコア69625

<html>
<div class="box-container"></div>
</html>

for (var i = 1; i <= 5; i++) {
    $('.box-container').append('<div class="box"></div>');

  }
 $('.box').on('click', function () {
    $(this).toggleClass('circle');
}

.boxの親要素として.box-containerを作り、子要素として.boxを入れることでdivの複製ができました。

afterを使うほうが、新しくdivを作る必要がなく、簡単そうですね。
大変参考になります。
ありがとうございました。

投稿2019/09/01 16:21

mkscia

総合スコア18