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

Question

我有两个带有 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。

这是我的数据源:

[{
  "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>');
    }
  })
});

这导致了一个奇怪的结果。我想我没有思考清楚。如何附加尚不存在的复选框？ 峰值流量和呼吸计时器

<强> JSFIDDLE

Answer 1

我不太确定您的代码块的用途，这是简单的解决方案

$.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>不存在(length === 0)，如果不存在，则追加它。