У меня есть набор динамически генерируемых флажков, где каждый из них имеетdata-id атрибут, соответствующий целочисленному идентификатору базы данных. Когда я заполняю свою html-форму объектом для редактирования, появляется список целых чисел, представляющих, какие флажки должны быть отмечены. Флажки обернуты вdiv с классомcheckbox-wrapper.

Итак, HTML выглядит так:

<div class="checkbox-wrapper">
    <input type="checkbox" id="checkbox1" data-id="1">
    <label for="checkbox1">Checkbox 1</label>
</div>
<div class="checkbox-wrapper">
    <input type="checkbox" id="checkbox2" data-id="2">
    <label for="checkbox2">Checkbox 2</label>
</div>
<div class="checkbox-wrapper">
    <input type="checkbox" id="checkbox3" data-id="99">
    <label for="checkbox3">Checkbox 99</label>
</div>

Обратите внимание, что идентификатор работает с автоматически увеличивающимися индексными номерами, в то время как идентификатор данных может иметь другое значение идентификатора. Я хочу выбрать их по data-id.

Теперь, используя JQuery, я знаю, что могу установить соответствующие флажки следующим образом:

$(".checkbox-wrapper>input[data-id='99']");
$(".checkbox-wrapper>input[data-id='1']");

Это работает в моей консоли, в Chrome, и возвращает соответствующий DOM-элемент. Аналогично, это ниже, устанавливает флажки для флажка:

$(".checkbox-wrapper>input[data-id='99']").prop("checked", "checked");
$(".checkbox-wrapper>input[data-id='1']").prop("checked", "checked");

Однако, если я перебираю список целых чисел в своем коде javascript (не непосредственно в консоли) и записываю возвращенные элементы, основываясь на значениях id, я получаю некоторые странные результаты:

var ids = [1,2]
$.each(ids, function(index, myID){
    console.log($(".checkbox-wrapper>input[data-id='"+myID+"']"));
    $(".checkbox-wrapper>input[data-id='"+myID+"']").prop("checked", "checked");    
}); 

Прежде всего, флажки не установлены. Во-вторых, моя консоль выводит странные результаты:

n.fn.init[0]
    context: document
    length: 0
    prevObject: n.fn.init[1]
    selector: ".checkbox-wrapper>input[data-id='1']"
    __proto__: n[0]

n.fn.init[0]
    context: document
    length: 0
    prevObject: n.fn.init[1]
    selector: ".checkbox-wrapper>input[data-id='2']"
    __proto__: n[0]

Печатный селектор Strings кажется идеальным. Точно такие же селекторы возвращают DOM-элементы при записи непосредственно в консоль Chrome. Затем они возвращают объекты следующим образом:

[<input type=​"checkbox" id=​"checkbox1" data-id=​"1">​]

Что такое n.fn.init [0] и почему он возвращается? Почему мои две, казалось бы, идентичные функции JQuery возвращают разные вещи?