1

Не работает обертка для цикла "for". При проходе цикла каждый раз значение "singleInspTime[e].date" (и других свойств) должно быть разным, но выводимые элементы на странице одинаковы. В чем может быть ошибка?

if (singleInspTime.length != 0) {
   for (var j = 0; j < singleInspTime.length; j++) {
       (function(e) { // Function-wrapper for correct work of loop "for"
            userInspDate.push(singleInspTime[e].date); 
            userInspId.push(singleInspTime[e].id); 
            userInspStart.push(singleInspTime[e].start); 
            userInspEnd.push(singleInspTime[e].end); 

            // Dynamically create the variables for Date Inspection Time form
            var $ulInsp1 = $("<ul/>", {
                id: "inspection" + singleInspTime[e].id
                });
            var $liInsp11 = $("<li></li>");
            var $divInsp11 = $("<div/>", {
                class: "item-content"
            });
            var $divInsp12 = $("<div/>", {
                class: "item-inner"
            });
            var $divInsp13 = $("<div/>", {
                class: "item-title label",
                text: "Date"
            });
            var $divInsp14 = $("<div/>", {
                class: "item-input"
            });
            var $inputInsp1 = $("<input>", {
                autocomplete: "off",
                type: "text",
                name: "inspDate",
                text: singleInspTime[e].date
            });

            // Dynamically create the Date inspection form
            $("#Insp").append($ulInsp1);
            $ulInsp1.append($liInsp11);
            $liInsp11.append($divInsp11);
            $divInsp11.append($divInsp12);
            $divInsp12.append($divInsp13);
            $divInsp12.append($divInsp14);
            $divInsp14.append($inputInsp1);

            // Fill the specified field "Date"
            var inspDate = $('input[name="inspDate"]').val(singleInspTime[e].date);

        })(j);
    }                           
 } else {
    console.log("array is empty");
 };

введите сюда описание изображения

13
  • ну кроме того, что одно и то же значение во все $('input[name="inspDate"]') впихивается, все выглядит нормально, ага, похоже как раз в этой строке и проблема, закомментируй ее
    – Grundy
    2 авг 2016 в 7:03
  • ну и IIFE тут не нужен - нет асинхронных функций внутри, по крайней мере в данном примере
    – Grundy
    2 авг 2016 в 7:17
  • @ИванПшеницын, console.log исходного массива - [Object, Object], в котором содержатся два объекта со свойствами "дата, начало, конец и id". console.log по итерациям цикла верный - выводятся корректные даты - "26/07/2016 и 08/09/2016 ".
    – PrinceOFF
    2 авг 2016 в 7:32
  • @Grundy, если я закомментирую эту строку поле элемента будет пустым. IIFE для корректной работы цикла, иначе будет выводится последнее значение "j" всегда
    – PrinceOFF
    2 авг 2016 в 7:33
  • @PrinceOFF, сделай рабочий пример показывающий ошибку
    – Grundy
    2 авг 2016 в 7:35

1 ответ 1

1

В данном случае ошибочно создаются элементы, и из-за этого идет попытка заполнения, опять-таки ошибочная, с помощью кода после создания.

Если пойти в справку

Можно увидеть, что в данном случае второй аргумент отвечает за атрибуты создаваемого элемента.

Значение инпута, хранится в атрибуте value, а не text, как это указано в коде:

var $inputInsp1 = $("<input>", {
    autocomplete: "off",
    type: "text",
    name: "inspDate",
    text: singleInspTime[e].date
});

Из-за этого при создании инпут пустой.

Далее, вместо того, чтобы созданному инпуту все-таки присвоить значение, выбираются все инпуты с указанным атрибутом name на странице: $('input[name="inspDate"]')

и уже им всем присваивается значение из текущей итерации. В итоге они все имеют значение для последней итерации цикла.

И наконец, так как внутри цикла нет асинхронных операций, по крайней мере в примере, не нужно использование IIFE.

В итоге пример может быть примерно таким:

var singleInspTime = [{
  id: 1,
  date: new Date(2016, 01, 02, 10, 0, 0)
}, {
  id: 2,
  date: new Date(2016, 03, 12, 17, 0, 55)
}];
for (var j = 0; j < singleInspTime.length; j++) {
  var $ulInsp1 = $("<ul/>", {
    id: "inspection" + singleInspTime[j].id
  });
  var $liInsp11 = $("<li></li>");
  var $divInsp11 = $("<div/>", {
    class: "item-content"
  });
  var $divInsp12 = $("<div/>", {
    class: "item-inner"
  });
  var $divInsp13 = $("<div/>", {
    class: "item-title label",
    text: "Date"
  });
  var $divInsp14 = $("<div/>", {
    class: "item-input"
  });
  var $inputInsp1 = $("<input>", {
    autocomplete: "off",
    type: "text",
    name: "inspDate",
    value: singleInspTime[j].date
  });

  // Dynamically create the Date inspection form
  $("#Insp").append($ulInsp1);
  $ulInsp1.append($liInsp11);
  $liInsp11.append($divInsp11);
  $divInsp11.append($divInsp12);
  $divInsp12.append($divInsp13);
  $divInsp12.append($divInsp14);
  $divInsp14.append($inputInsp1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Insp"></div>

Ну и чтобы не путаться с индексами, можно воспользоваться методами для работы с массивами: map, reduce, например так

var singleInspTime = [{
  id: 1,
  date: new Date(2016, 01, 02, 10, 0, 0)
}, {
  id: 2,
  date: new Date(2016, 03, 12, 17, 0, 55)
}];

singleInspTime.reduce(function(Insp, elem) {
  return Insp.append(
    $("<ul/>", {
      id: "inspection" + elem.id
    }).append(
      $("<li>")
      .append(
        $("<div/>", {
          class: "item-content"
        })
        .append(
          $("<div/>", {
            class: "item-inner"
          })
          .append(
            $("<div/>", {
              class: "item-title label",
              text: "Date"
            }))
          .append(
            $("<div/>", {
              class: "item-input"
            }).append(
              $("<input>", {
                autocomplete: "off",
                type: "text",
                name: "inspDate",
                value: elem.date
              })
            )
          )
        )
      )
    )
  );
}, $("#Insp"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Insp"></div>

Либо вообще воспользоваться каким-нибудь шаблонизатором, в который просто передавать два значения.

2
  • Все так и есть, спасибо! Ошибка была в атрибуте "value". Я, правда, полагал, что без обертки всегда будет записываться значение "j" последней итерации, но, оказалось, for работает и без обертки)
    – PrinceOFF
    2 авг 2016 в 8:07
  • @PrinceOFF, без обертки всегда будет записываться значение "j" последней итерации только если значение получаемое с помощью j вычислялось асинхронно. В данном случае ничего такого нет.
    – Grundy
    2 авг 2016 в 8:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.