Как зациклить и выбрать добавленные элементы, чтобы получить значения .text () и .data ()?

Question

Я добавил несколько динамических и сохраненных значений div, используя следующий код:

var $element = $('<div class="draggablebox" />').text(component.children(':selected').text()).css({
  width: wbox.val() * 2,
  height: lbox.val() * 2,
  padding: '0.5em',
  border: '2px solid',
  'user-select': 'none',
  'background-color': 'gray',
  cursor: 'pointer',
  // position: 'absolute',
  // 'font-size': '',
  block: 'inline'
});
$element.attr('id', component.val());
$('#convas').append($element);

Затем я пытаюсь перебрать элементы, чтобы получить значения data() каждого из элементов, используякод ниже.Вывод я получаю text() div'ов вместе в одной ячейке.

$('#convas').each(function(i, item) {
  var row = '<tbody> <tr>';
  row += '<td>' + $(item).text() + '</td>';
  row += '<td>' + $(item).data('l') * $(item).data('w') + '</td>';
  row += '<td>' + $(item).data('height') + '</td>';
  row += '<td>' + $(item).data('quality') + '</td>';
  row += '<td>' + $(item).data('minrate') + '</td>';
  row += '<td>' + $(item).data('maxrate') + '</td>';
  row += '<td>' + $(item).data('minTotal') + '</td>';
  row += '<td>' + $(item).data('maxTotal') + '</td>';
  row += '</tr> </tbody>';
  console.log($(item).data('l'));
  $('table#report-table').append(row);
}); 

Answer 1

#convas кажется родителем.Я предполагаю, что вы хотите перебрать элементы div, которые вы добавили к этому, так что используйте вместо этого:

$('#convas .draggablebox').each(function(i, item) {
  // your code here...
});