javascript - 仅当相同的 div 不存在时才生成并附加数据

Question

我正在尝试创建一个虚拟应用程序，其中数据将根据某些选择显示在此处。

我单击“打开模态”按钮，然后使用表中的复选框选择一些数据以进行行选择。

填充了 JSONData 的表在某种程度上看起来像:

function showData(){
                var count = 0;
                $('input[name="selectData"]:checked').map(function() {
                    var JSONData =  JSON.parse(decodeURIComponent(this.value));
                    content += '<div class="container parent" id="parent-'+count'"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+JSONData.name+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';
                    count++;
                });
                if($('#parent-'+count).length==0) {
                    $('.box').html(content);
                    resetEvents();
                } else {
                    alert("Data already exists!");
                }

        }

现在，我使用表中的复选框选择一行，然后单击“保存”按钮，然后将数据附加到 class="box"的静态 div 中。

但是，如果具有 id 的特定 div(我使用 id="parent"+count"为 div 随机生成，如上面的函数所示)已经存在于带有类框的 div 中，则它应该'不用补充。

1. 从屏幕截图中显示的表格中选择 A & C，然后点击“保存”。

2. A 和 C 分别附加到 ID 为“parent-0”和“parent-1”的“div.box”。

3. 现在，从表中选择 A 和 B。

当前情况:未添加任何内容，警报显示为“数据已存在!”

理想行为:B 应附加到 ID 为“parent-2”的“div.box”，并且警报应显示为“A 已存在!”。

如何实现这一目标？

Answer 1

我认为你的意思是做类似的事情:

 if($('#parent-'+count).length { // this means id exists
       alert("Data already exists!");
 } else {
       $('.box').html(content);
       resetEvents();

 }