Блог

Главная - Вопросы по программированию - jQuery.each не добавляет элементы внутри append

jQuery.each не добавляет элементы внутри append

#jquery

#jquery

Вопрос:

Я пытаюсь добавить элементы внутри строки начальной загрузки с данными, полученными из API, поэтому внутри $('CONTAINER').append( я делал a each() для каждого элемента в массиве объектов, но вместо этого элементы не добавляются, похоже, что each() это игнорируется.

я использую this.taglio , поскольку следующий код находится внутри другого each()

Мой код выглядит так:

 $('<div>', {
  class: 'row'
}).append(
  $.each(this.tagli, function() {
    $('<div>', {
      class: 'col-md-3'
    }).append(
      $('<div>', {
        class: 'panel panel-default taglio'
      }).append(
        $('<div>', {
          class: 'panel-body'
        }).text(this.importo)))
  }),

  $('<div>', {
    class: 'col-md-3'
  }).append(
    $('<div>', {
      class: 'panel panel-default add'
    }).append(
      $('<div>', {
        class: 'panel-body text-center'
      }).text(' ')).on('click', function() {
      $('#modalAdd').modal()
    }))
)

Я использую jquery 2.2.4

И только div вне .каждый добавляется…

Ответ №1:

$.each() возвращает объект, а не строку HTML, которую можно добавить. Чтобы устранить проблему, вы можете изменить логику, используемую map() для создания строки HTML, примерно так:

 let html = this.tagli.map(function(o) { 
  return '<div class="col-md-3"><div class="panel panel-default taglio"><div class="panel-body">'   o.importo   '</div></div></div>';
});
let $row = $('<div class="row" />').html(html);

$('<div class="col-md-3"><div class="panel panel-default add"><div class="panel-body text-center"> </div>').appendTo('#someElement');

$('#someElement').on('click', '.panel-body', function() {
  console.log('element clicked');
});

$('#modalAdd').modal()

Обратите внимание, что, поскольку в JS так много HTML, вы можете вместо этого рассмотреть создание скрытых элементов шаблона в DOM, которые вы clone() и исправляете в своем цикле перед добавлением в DOM.

Комментарии:

1. Как я могу это сделать, не используя функцию стрелки? я пытался сделать что-то вроде this.tagli.map(function(taglio) { return $('<div>')... }) , но это не работает, в то время как с функцией стрелки это работает.. (я должен позволить ему работать на IE9 ..)

2. Никаких проблем, я только что обновил ответ, чтобы использовать анонимные функции вместо функций со стрелками

3. работает ли анонимная функция .map() только со строкой? потому что я пытался использовать то же решение, this.tagli.map(function (o) { return $('<div>', { class: 'col-md3' }).append($('<div>', { class: 'panel panel-default taglio' }).append($('<div>', { class: 'panel-body text-center' }).text(o.importo)));}) но оно не работает

4. в то время как, если я просто изменю function (o) { return with o => , он будет работать так, как нужно

5. он работает, но только с функцией стрелки, которую я должен избегать использовать, поскольку она не поддерживается в IE9..