jQuery将文本附加而不是HTML

Question

下面的代码从一个Ajax json调用中获取一个值，应该将其附加到具有相应值的div。问题是，它作为文本附加，而不是作为html，所以我在页面上只能看到我的html作为文本。我该如何解决这个问题？

$.ajax({
    url: "https://domain.com/maprequest.php",
    type: "POST",
    dataType: 'json',
    data: JSON.stringify(url_array),
    crossDomain: true,
    success: function(response) {
        $.each(response, function(k, v) {
            if (v != "") {
                $('.offer-list li .img a')[k].append("<div class='hoverbox'><img src='" + v + "' alt='hover' /></div>");
            }
        });
    }
});

- Hans Wassink

---

你能在 jsfiddle 上重现这个问题吗？我以前遇到过类似的情况。 - Phiter

Answer 1

通过编写$('.offer-list li .img a')[k]，您可以获得索引为k的实际HTML元素，而不是jQuery集。我猜你的问题是由此引起的。

尝试使用以下代码。

$('.offer-list li .img a').eq(k).append("<div class='hoverbox'><img src='" + v + "' alt='hover' /></div>");

eq函数将在jQuery集合内部过滤出索引为k的HTML元素。请参阅此处的文档here。

真正让您困惑的是，HTML元素具有append和appendChild方法，分别将纯文本或子节点追加到给定元素中，因此您的代码将HTML作为纯文本附加。

- Zoltán Tamási

---

谢谢，问题已解决！我会在5分钟内将其标记为解决方案！ - Hans Wassink

谢谢Zoltan，我注意到$($('.offer-list li .img a')[k]).append(...)也可以工作。 - Astra Bear