Question

我有一个变量var $deleteEl = $('<a class="upload_delete" href="#">Delete</a>');，这是一个删除链接，需要在每个上传的图像旁边创建。 html结构是下一个：

<ul id="thumb_galery">
    <li class="thumb">
        <img>
        <a class="upload_delete"></a>
    </li>
    <li class="thumb">
        <img>
        <a class="upload_delete"></a>
    </li>
</ul>

对于每个上传的图像，带有图像的拇指被附加到thumb_galery

$(thumb_galery).append('<li id="thumb"><img src="img/success.jpg" alt="' + fileName + '"></li>');

我需要在html结构中提供的图像旁边的同一li中添加删除链接。

如果我追加这样的删除链接

$(thumb).append($deleteEl);

它适用于上传的第一张图片，但对于下一张图片，它只会使用类拇指将其附加到第一张li。

如何在li中为下一个上传的图片添加删除链接？

我尝试的另一个解决方案是在第一个附加中放置一个变量，如下所示

$(thumb_galery).append('<li class="thumb"><img src="img/success.jpg" alt="' + fileName + '">' + $deleteEl + '</li>');

这创建了完美的html结构，但它不是删除链接，而是显示[object Object]

Answer 1

为元素添加唯一id或使用类。并尝试：

var item = $('<li id="thumbX" class="thumb"><img src="img/success.jpg" alt="' + fileName + '"></li>');
item.append($deleteEl)
$(thumb_galery).append(item);

Answer 2

你可以像这样直接附加它，你不应该有多个具有相同id的元素。

http://jsfiddle.net/xq8f7/

var $deleteEl = $('<a>',{ 
    'class': "upload_delete",
    href: "#",
    text: "Delete"});
$('.thumb').append($deleteEl);

jquery append只附加在列表的第一个元素中或显示错误[object Object]

2 个答案: