克隆div并使用JSON数据附加到DOM时出现问题

Question

我正在使用AJAX GET调用从JSON格式的服务器中检索一些信息，此后，我克隆了隐藏在DOM中的div并将其附加到我的div容器{{{ 1}}已正确克隆并附加，但是数据未正确打印，这是我得到的结果：

但是，如果我在div函数中创建HTML template，它将起作用。我会克隆each以避免混乱我的div函数。

我的jQuery代码，在其中我将success和隐藏的div克隆并附加到我的DOM中：

template

success: function(data) {
console.log(data);
console.log(data.success);

$.each(data.starters, function(index, item) {
  /*
  var menu_row_1 = '<div class="section_menu_bahi_row_container" style="">';	
  menu_row_1 += '<span class="section_menu_bahi_row_name" style="">' + item.name + '</span>';
  menu_row_1 += '<span class="section_menu_bahi_row_half" style="">' + item.half + '</span>';
  menu_row_1 += '<span class="section_menu_bahi_row_full" style="">' + item.full + '</span>';
  menu_row_1 += '</div>';
			
  var menu_row_2 =  '<div class="section_menu_mada_page_row_container" style="">';
  menu_row_2 += '<span class="section_menu_mada_page_row_name" style="">' + item.name + '</span>';
  menu_row_2 += '<span class="section_menu_mada_page_row_half" style="">' + item.half + '</span>';
  menu_row_2 += '<span class="section_menu_mada_page_row_full" style="">' + item.full + '</span>';
  menu_row_2 += '</div>';
  */
  
  var menu_row = $('.section_menu_mada_page_row_container').clone();
  $(".menu_container[data-link='starters']").append(menu_row);
});
});

Answer 1

您可以为此使用jQuery模板。这是jQuery template on GitHub

的链接

success: function(data) {
  console.log(data);
  console.log(data.success);

  var starters_data = data.starters;
  var markup = "<div class=\"section_menu_mada_page_row_container\"><span class=\"section_menu_mada_page_row_name\">{name}</span><span class=\"section_menu_mada_page_row_half\">{half}</span><span class=\"section_menu_mada_page_row_full\">{full}</span></div>";

  $.template("meneRowTemplate", markup);
  $.tmpl("meneRowTemplate", starters_data).appendTo(".menu_container[data-link='starters']");
});

Answer 2

<span class="section_menu_mada_page_row_name" style="">' + item.name + '</span>

应该是

<span class="section_menu_mada_page_row_name" style="">' ' + item.name + ' '</span>

与其他尝试显示数据的地方相同