为什么使用jQuery的.append()函数和一个带有元素名称的jQuery对象和一个数组作为单个参数工作?

时间:2013-12-19 22:52:34

标签: javascript jquery html html-select jquery-append

我有一个问题,关于jQuery的.append函数如何在以下代码段中工作,这些代码段动态地将值添加到选择框:

for (var i=currentYear; i >= minYear; i--){
    $('#year').append($("<option/>", { value: i, text: i}));
}

我已经知道这段代码确实有效,因为我在谷歌搜索过程中在线查找类似代码之前就已经以这种方式使用了.append。但是,我发现(https://stackoverflow.com/a/3155663/3120918)上的类似代码的网页并未解释其工作原理。我准备好.append函数(http://api.jquery.com/append/)上的官方jQuery文档页面,但它没有说明传递包含自闭合选项元素和数组的单个jQuery对象($("<option/>", {value: key, text: value }) )作为追加函数的单个参数。我希望有人可以向我解释这是如何以及为什么有效。

1 个答案:

答案 0 :(得分:2)

  

包含自闭合选项元素和数组($("<option/>", {value: key, text: value })

的jQuery对象

不,这是jQuery constructor for "creating elements"的一种特殊形式:

  

如果将字符串作为参数传递给$(),jQuery会检查字符串以查看它是否看起来像HTML [,如果它],jQuery会尝试创建新的DOM元素正如HTML所述。

     

[...]

     

jQuery()的第二个参数可以接受一个普通对象,该对象由可以传递给.attr()方法的属性的超集组成。

     

重要:如果传递了第二个参数,则第一个参数中的HTML字符串必须表示一个没有属性的简单元素。从jQuery 1.4开始,可以传入任何事件类型,并且可以调用以下jQuery方法:valcsshtmltext,{{1} },datawidthheight

     

[...]

所以这里发生的是构造一个具有给定值和文本的新offset元素,它包含在jQuery集合中。然后将其传递给append,它(像往常一样)将集合中的所有元素附加到其元素 - 此处为<option> #year元素的新选项。