Question

jQuery 3.3.1

我有一个我想动态添加元素的bootstrap模式广告。我有以下内容：

 $('#somemodal .modal-body').empty();
   var data = {
            'foo': 'bar',
            'foo2': 'baz'
        }
  var s = $('<select />');

        for(var val in data) {
            $('<option />', {value: val, text: data[val]}).appendTo(s);
        }

        for (let i = 0; i < 3; i++) {
            var div = $('<div/>');
            s.appendTo(div);
            $('#somemodal .modal-body').append(s);
        }


        $('#somemodal').modal({ show: true });

当我运行它时，只有一个选择在我的模态内部时应该有3.我的模态体内部的html被覆盖而不是附加到。如何通过根据迭代次数而不是仅显示一个选择元素的数量来显示我的模态内部来实现我想要的结果？

Answer 1

问题是s.appendTo(div);每次迭代都会将相同的<select>移动到不同的<div>。当你append()一个元素时，它不会复制......它只是移动它

克隆选择以为每次迭代创建一个新的

s.clone().appendTo(div);

您还想将新<div>而不是<select>附加到模态正文

$('#somemodal .modal-body').append(div);

在循环中追加元素只出现一次..jquery

1 个答案: