javascript - jquery追加仅追加到列表的第一个元素或显示错误[object Object]

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>');

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

如果我像这样附加删除链接

$(thumb).append($deleteEl);

它对于上传的第一张图像效果很好，但对于下一张图像，它仅将其附加到第一个 li带有类(class)拇指。

如何在 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);