javascript - jQuery:如果现有元素ID不匹配，则追加新元素

我有两个带有ID的复选框。

的HTML

<div class="controls">
  <label class="checkbox" name="Blood Oxygen">Blood Oxygen
    <input type="checkbox" value="Blood Oxygen" name="1" id="4" checked="checked">
  </label>

  <label class="checkbox" name="Blood Pressure">Blood Pressure
    <input type="checkbox" value="Blood Pressure" name="1" id="6" checked="checked">  </label>
</div>

我需要动态附加更多复选框。但是在添加时，我必须检查是否存在具有类似ID的复选框。我必须忽略具有相似ID的一个，但附加其他ID。

这是我的数据源：

[{
  "id": 3,
  "name": "Respiratory & COPD",
  "slug": "respiratory_and_copd",
  "tests": [{
      "id": 4,
      "name": "Blood Oxygen"
    },
    {
      "id": 6,
      "name": "Blood Pressure"
    },
    {
      "id": 8,
      "name": "Peak Flow"
    },
    {
      "id": 17,
      "name": "Respiratory Timer"
    }
  ]
}]

这是我要比较的方法：

$.each(data[0].tests, function(key, val) {
  $(".controls input[type='checkbox']:checked").each(function() {
    var $checked_test_id = $(this).attr('id');
    if ($checked_test_id !== val.id) {
      var $control = $('.controls')
      $($control)
        .append('<label class="checkbox" id="' + val.id + '" name="' + val.name + '">' +
          '<input type="checkbox" value="' + val.name + '" id="' + val.id + '">' + val.name + '</label>');
    }
  })
});

这导致了一个奇怪的结果。我想我不是在直视。如何添加不存在的复选框？ Peak Flow和Respiratory Timer

JSFIDDLE

最佳答案

我不确定您要使用的代码块是什么，这是简单的解决方案

$.each(data[0].tests, function(key, val) {
    var find = $('#' + val.id).length;
    if (find === 0) {
        $('.controls').append('<label class="checkbox" id="' + val.id + '" name="' + val.name + '">' +
            '<input type="checkbox" value="' + val.name + '" id="' + val.id + '">' + val.name + '</label>');
    }
});

循环遍历所有测试，看看#<id>是否不存在（长度=== 0），然后将其不存在。