Question

我有一个看起来像这样的对象：

var grocery_list = {
  "Banana": { category: "produce", price: 5.99 },
  "Chocolate": { category: "candy", price: 2.75 },
  "Wheat Bread": { category: "grains and breads", price: 2.99 }
}

我希望能够以HTML格式显示对象中的每个项目：

<div id="grocery_item" class="container">
    <div class="item">Item Here</div>
    <div class="category">Category Here</div>
    <div class="price">Price Here</div>
</div>

我知道如何在JS中循环使用Object，但我不确定如何在DOM中显示这些项目。我相信我可以使用jQuery追加功能，但我不确定如何。

任何帮助将不胜感激。谢谢！

Answer 1

这是你使用jQuery的方法（正如你提到的那样，你想先使用jQuery）。但它不是最好的方法。如果您打开以学习更好的方法，那么请检查一些MV *框架（AngularJS，Ember等）。无论如何，这只是一个例子：

var grocery_list = {
  "Banana": { category: "produce", price: 5.99 },
  "Chocolate": { category: "candy", price: 2.75 },
  "Wheat Bread": { category: "grains and breads", price: 2.99 }
}

var wrapper = $('#wrapper'), container;
for (var key in grocery_list){
    container = $('<div id="grocery_item" class="container"></div>');
    wrapper.append(container);
    container.append('<div class="item">' + key +'</div>');
    container.append('<div class="category">' + grocery_list[key].category +'</div>');
    container.append('<div class="price">' + grocery_list[key].price +'</div>');
}

jsfiddle在这里：

http://jsfiddle.net/5jhgbg9w/

编辑：请以此为例（由于您正在学习，这是正常的）。正如其他人指出的那样 - 它不是最好的方法。尝试结合其他示例，特别是那些不将HTML组成字符串的示例。对于像这样的简单任务，它很简单，但是代码越多，代码就会变得更加混乱。我相信你的学习进化＆＃34;无论如何会让你到那里:-)为每个人欢呼

Answer 2

您可以使用jQuery创建HTML元素：$('<div>', {attr1: value, attr2: value});这会返回一个新的jQuery对象，因此您可以像jQuery元素一样使用它。

jQuery.text（）方法：$('div').text('some text')如果只将文本放在元素中，建议使用此方法。它将逃脱所有特殊字符，如'<'。而是放&lt。与jQuery.html（）方法不同，这避免了XSS攻击。您可以在jQuery docs查看有关.html方法的安全注意事项。

// Create a div element with jQuery which will hold all items.
var $tree = $('<div>', {id: 'items-tree'});
//Loop all items and create elements for each
for (var key in grocery_list) {
  var $gItem = $('<div>', {
    id: 'grocery_item',
    class: 'container'
  });

  var $item = $('<div>', {
    class: 'item'
  }).text(key);
  $gItem.append($item);

  var $category = $('<div>', {
    class: 'category'
  }).text(grocery_list[key].category);
  $gItem.append($category);

  var $price = $('<div>', {
    class: 'price'
  }).text(grocery_list[key].price);
  $gItem.append($price);

  $tree.append($gItem);
}

JSFiddle

Answer 3

将重复父div <div id="grocery_item" class="container">。购物清单中的物品。＆＃34; id＆＃34;这个父div将随机生成，例如项目@index 0将是＆＃34; grocery_item0＆＃34;

对于每个循环项，首先创建父div，然后开始使用（另一个循环）将详细信息附加到父div。下面是示例jquery，

$（＆＃34; .grocery_item0＆＃34;）。append（＆＃34;＆＃34;）;

Answer 4

我将通过您的列表定义不是最好的事实，我这样说：

使用jQuery你可以这样做：

<script>
var _parent = $(".container").parent();
_parent.empty();

var _html;
$.each(grocery_list,function(prop, val){
    _html = "<div id=\"grocery_item\" class=\"container\">";
    _html += "<div class=\"item\">"+prop+"</div>";
    _html += "<div class=\"category\">"+val.category+"</div>";
    _html += "<div class=\"price\">"+val.price+"</div>";
    _html += "</div>";

    _parent.append(_html);
});
</script>

注意*：没有通过创建HTML字符串来管理DOM。这只是您学校作业的快速样本。

Answer 5

它很旧，但你可以试试包 html-stringify。正如它的介绍：“将 Javascript 对象或数组转换为漂亮的 HTML 字符串，以便在浏览器中呈现。”

在HTML中显示JavaScript对象

5 个答案: