jquery - 使用 jQuery 追加后重置 CSS 样式

Question

我正在使用从回调返回的内容填充 DIV，其中包含多个 HTML 项，并且每个项都有自己的关联类。在我调用 .append 之后，内容没有以正确的关联样式出现。

$.ajax({
    type: "GET",
    url: "blah.xml",
    dataType: "xml",
    data: myData,
    success: function(xml) {
        $(xml).find('item').each(function(){
            var id = $(this).attr('appId');
            $('<li><h5 class="thing">' + id + '</h5>').appendTo('#results');
        });
    }
});

因此，它获取 ID 并将 ID 设置在 H5 上，类为“thing”，然后附加到 DIV 结果。这很好用，但问题是当这种情况发生时，名为“thing”的类永远不会被应用。它肯定在那里，但没有被渲染。

有任何想法吗？

Answer 1

$('#results').append('<li><h5 class="thing">' + id + '</h5>');

因此，出于多种原因，包括性能原因和自动关闭<ul>等，我建议您首先将整个子树构建为字符串。

var s = '<ul>';
$(xml).find('item').each(function(){
    var id = $(this).attr('appId');
    s += '<li><h5 class="thing">' + id + '</h5></li>';
});
$('#results').append(s + '</ul>');

Answer 2

如果您想使用“li”列表，请使用标签“ul”，所以：

$('#results').append('<ul></ul>');

然后你必须编写这样的代码：

    var results = "";
    $(xml).find('item').each(function(){
         var id = $(this).attr('appId');
         results+= '<li><h5 class="thing">' + id + '</h5></li>';
     });
    $('#results ul').append(results);