Question

有人可以告诉我为什么此代码不会更新数据响应？这是每个函数的一个简单示例。

这是ajax请求的html文件：

<html>
<div class="new">
    <div class="span4">
        <h2>Heading1</h2>
        <p>Text1</p>
        <p><a href="#">Link1</a></p>
    </div>
    <div class="span4">
        <h2>Heading2</h2>
        <p>Text2</p>
        <p><a href="#">Link2</a></p>
    </div>
</div>
</html>

这里是主文件正文：

<!DOCTYPE html>
<body>
<textarea id="gethtml" rows="40" cols="125"></textarea>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
    "use strict";
    $(function() {

        $.get('file.html', function(data) {
            ajaxfunction(data);
        });

        function ajaxfunction(data) {
            $(data).find(".span4").each(function () {
                $(this).find("p").eq(0).text("Hello");
                $(this).find("p").eq(0).after("<p>newline</p>");
                console.log($(this));
            });
            $("#gethtml").val(data);
        }

    });
</script>
</body>
</html>

您可以看到控制台显示每个span4的正确数据，但为什么“data”字符串不会更新以反映更改？

修改

function ajaxfunction(data) {
            var tree = $("<div>" + data + "</div>");
            $(tree).find(".span4").each(function () {
                $(this).find("p").eq(0).text("Hello");
                $(this).find("p").eq(0).after("<p>newline</p>");
                console.log($(this));
            });
            $("#gethtml").val(tree.html());
}

这位于textarea，即<p>Hello</p><p>newline</p>。所以，为了给它添加新的一行，那么我必须将其修改为一个字符串，对吗？

谢谢！

Answer 1

data是一个字符串。

您的each代码会将此字符串解析为DOM树并对其进行修改但是，您不对此DOM树执行任何操作。

您的val()来电再次使用原始字符串。

相反，您需要调用html()来获取修改后的DOM树的源。

有关详细信息，请参阅my blog post。

使用每个函数修改AJAX html响应

1 个答案: