Question

我正在学习JS和jQuery这个我不理解的我正在使用jQuery创建新元素，我想使用for循环来制作其中的5个元素。

var $daisy =  $("<img>")
.attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg")
.attr("width", "35")
.attr("alt","Daisy Photo")
.appendTo("body");

如果我将这个代码粘贴到for循环中它会工作，并且我会将其中的5个并排，但是当我在那里输入变量时它不起作用：

  for (var i = 0; i < 5; i++) {
      $daisy;
       }

任何人都可以解释一下为什么它不能使用var名称但是当我粘贴所有代码时它会起作用吗？感谢

Answer 1

它没有用，因为当你使用变量时，你只执行了appendTo一次。

jQuery通常的工作方式是链接命令。选择器/创建者选择或创建DOM元素并返回该对象，该对象由附加函数使用点表示法.来执行，依此类推，直到链中不再有函数并返回最终对象。这可以存储到变量中。您不是将函数存储在变量中，而是存储函数的结果。在您的情况下，您将新的img附加到body，并返回结果（对象）并将其存储在变量中。

当你把这个变量放在一个循环中时，没有任何反应，因为它只是一个值，而不是一个函数。

您的代码：

var $daisy = $("<img>")  // create an img element and return it
.attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg") // assign the src value, return the img element
.attr("width", "35")  // modify the width, return the img element
.attr("alt","Daisy Photo") // add an alt attribute, return the img element
.appendTo("body"); // add the img element to the body, AND RETURN IT, storing in $daisy

因此$daisy现在包含<img src="url" alt="Daisy Photo" style="width: 35">，其中也已添加到body。此时appendTo已完成。

当您将所有代码放入循环中时，您每次都会创建并附加它。

然而，你可以这样做：

var $daisy = $("<img>")
.attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg")
.attr("width", "35") 
.attr("alt","Daisy Photo");

for (var i = 0; i < 5; i++) {
    $daisy.clone().appendTo("body");
}

注意，在这种情况下你需要使用clone()，否则jQuery会从其DOM位置删除原始img并再次追加它，从而导致单个img仍然存在。克隆会附加一个副本。

Answer 2

使它成为一个功能：

function daisy(){  
    $("<img>")
    .attr("src", "https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg")
    .attr("width", "35")
    .attr("alt","Daisy Photo")
    .appendTo("body");
}

for (var i = 0; i < 5; i++) {
    daisy();
}

for循环中的jQuery变量

2 个答案: