在以下示例中,“ <ul>”是错字还是有特殊含义?

时间:2018-12-27 03:58:57

标签: javascript jquery html webpage

getJSON(https://api.jquery.com/jquery.getjson/)的文档包含以下代码:

$( "<ul/>", {

看起来应该改为</ul>?还是对此有特殊含义,例如它是某些东西的快捷方式,或者斜杠用作转义符?

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

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

2 个答案:

答案 0 :(得分:4)

这是jQuery的事情-有关更多信息,请参见我的答案here。本质上,它所做的是创建一个<ul></ul>开头和结尾标签,但是更加简洁。我已经修改了链接的答案,以显示您的示例如何工作。从此JS开始:

document.createElement("ul");

然后,您可以像这样使用jQuery:

$("<ul></ul>");

由于它是jQuery,并且变得越来越简洁,因此最终成为其紧凑,自动关闭的符号:

$("<ul/>");

拥有自动关闭标签的另一个原因是因为它是一个 empty 元素-它没有子元素。因此,它是自动关闭标签的原因是,它是您正在创建空元素的标志。


这是代码每一位的作用:

$( "<ul/>", {...})

如上所示,这将创建一个空的<ul></ul>元素。

"class": "my-new-list"

这会将类my-new-list添加到元素中,因此看起来像这样:

<ul class="my-new-list"></ul>

此行:

html: items.join("")

innerHTML元素的<ul></ul>属性设置为串联成单个字符串的items数组。

最后一行:

.appendTo("body");

将元素追加到页面正文。现在,我们的元素看起来像:

<ul class="my-new-list">TheItemsArray</ul>

它被插入到<body>元素的末尾,紧接在结束</body>标签之前。

答案 1 :(得分:1)

在HTML中,<tag/>被称为“自动关闭标签”,即项目实际上可以是独立的。例如,在原始HTML中,将图像写为<img/>(即使<img>也可以)。

因此,<tag/>意味着带标签的元素不需要打开或关闭标签,因为具有打开或关闭标签根本就没有意义,或者仅仅是在两者之间没有插入任何东西时。例如,<img/>是一个自动关闭标签的原因是因为在打开和关闭标签之间将某些内容插入图像没有意义。

相同的想法可以应用于JQuery中的<ul/>项目。当创建一个空的ul元素时,empty的定义意味着ul元素中还没有任何内容可插入,因此JQuery继续进行并将其初始化为<ul/>

相比之下,在代码中将</ul>视为错字的想法是没有意义的,因为</tag>表示右括号,而没有提及开括号。

因此,总结来说,(tl; dr),<tag/>是HTML中的实际内容,是指自闭合元素。