jQuery:在同一类的多个div中添加一个元素

Question

使用最新的 jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>

有人可以解释一下两者之间的区别吗:

$(document).ready(function () {
  $('.produit').append('<img src="img.png" alt="altimg" />');
});

和:

$(document).ready(function () {
  $('.produit').append($('img').attr({ 'src':'img.png', 'alt':'altimg' }));
});

=> 第一个代码可以工作，但第二个代码多次添加图像(正好七次)，然后抛出 JavaScript 异常:

• 在 Chrome 下:“无法读取未定义的属性“cycleW””
• 在 Firefox 10 下:“next 未定义”

...

我是一个 JavaScript 初学者，我认为这两个代码会做同样的事情......

...有什么想法吗？

Answer 1

您的第二个代码有错误。

应该是:

$('<img>', ...);

要创建一个新元素，标签需要用尖括号括起来!

正如所写，它选择页面上的每个现有图像标签，并将它们附加到.produit的每个实例中。 .

理想情况下，您还应该使用 $('<tag>') 的 map 版本，而不是调用 .attr之后:

$('<img>', {src: 'img.png', alt:'altimg'}).appendTo('.produit');