要素を追加する際にclone()メソッドを使用する理由を教えていただけませんでしょうか

こんにちは。

select要素にoption要素を動的に追加したいのですが、あるサンプルコードで以下のようにclone()メソッドを使用していました。（コードの最終行）
clone()メソッドは無くてもoption要素は追加できるように思うのですが、clone()メソッドを使う理由が何かしらあるのでしょうか。

よろしくお願いいたします。

  var optionObj = [
    { text: 'aaa', value: 'aaa' },
    { text: 'bbb', value: 'bbb' },
    { text: 'ccc', value: 'ccc' }
  ];

  for (var i = 0; i < optionObj.length; i++) {
    var prop = optionObj[i];
    var $option = $('<option></option>');

    $option.attr('value', prop.value);
    $option.text('value', prop.text);

    $('select').append($option.clone());
  }

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

回答2件

このコードでclone()する必要はありません。

ただし、jQuery で $('<option></option>') で要素を生成するのは遅いので、この行をループの外に出してclone()することで高速化できるかもしれません。(そもそも、実行時パフォーマンスが気になるならjQueryを使うべきではありませんが)

投稿2021/01/04 15:23

int32_t

総合スコア21679

kg1008

2021/01/06 12:36

ご回答ありがとうございます！ jQueryが遅いというのは勉強不足でした。要素の生成が遅いのであればint32_tさんの仰るようにループの外に出した方が良いですね！

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

ベストアンサー

テンプレや既存のHTML要素のcloneは使いまわしをするときにつかうので
今回の流れでは不要です。
ちょっとソースもおかしいですね。こんなふうにするとよいかと

javascript
1  $('select').append(
2    $.map(optionObj,function(x){
3      return $('<option>').val(x.value).text(x.text);
4    })
5    );

投稿2021/01/05 00:38

yambejp

総合スコア116694

kg1008

2021/01/06 12:34

ご回答ありがとうございます！コードの改善案も大変勉強になりました。例えば下記コードのようにselect要素が複数あり、すべてに同じ要素を追加する場合はclone()が必要になりますでしょうか。 $('#select1').append($option.clone()); $('#select2').append($option.clone()); $('#select3').append($option.clone()); また、下記のようにclone()が無い場合は不具合が発生しますでしょうか。 $('#select1').append($option); $('#select2').append($option); $('#select3').append($option);

kg1008

2021/01/06 12:53

質問ばかりですみません。教えていただきました改善案のコードですが、$.map()を使っているのでoptionObjの中身を保持したい場合は使用を避けた方がよろしいでしょうか。よろしくお願いいたします。