json - JQuery 奇怪的语法

Question

我是 JQuery 新手，并尝试使用它根据 JSON 对象的查询结果动态构建 HTML。无论如何，在 JQuery API 网站(http://api.jquery.com/jQuery.getJSON/)上，我发现这个示例，我不理解语法，而且我似乎找不到任何解释为什么这种语法是合法的或者如何使用它。

$.getJSON('ajax/test.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  // *** THIS IS THE PART THAT IS WEIRD ***
  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

有人可以向我推荐解释语法及其上方注释的文档吗？

Answer 1

$('<ul/>')

创建一个未附加到 DOM 的新 UL 元素

$('<ul/>', {'class':'my-new-list'})

使用键值对设置该元素的 DOM 变量。现在您有了一个带有 my-new-list 类的 UL 元素。

$('<ul/>', {'class':'my-new-list', 'html': items.join('')})

这将上面创建的 LI 元素数组连接到一个字符串中(在本例中没有分隔符，.join('-') 将在每个 LI 元素之间放置一个连字符)并分配给 UL 的内部 html。

$('<ul/>', {'class':'my-new-list', 'html': items.join('')}).appendTo('body');

最后但并非最不重要的一点是，它将新创建的 UL 元素及其子 LI 元素附加到 BODY 元素，使其在页。