Question

我正在学习jquery（使用1.10）。我正在使用ajax通过发布一个数字来解析由php动态生成的xml，例如，如果你发布n = 3，你得到：

<?xml version="1.0">
<list>
<item>item 1</item>
<item>item 2</item>
<item>item 3</item>
</list>

我可以收到响应并将文本解析为xml，我写了这段代码

<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="windows-1252">
    <meta name="viewport" content="width=device-width">
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function() {
            $("#btn1").click(function() {
                $.post("jq.php",{"n" : $("#v").val()},function(d,s) {
                    $("#div1").html("<ul>");
                    $(d).children().each(function(i,e) {
                        $("#div1").append("<li>"+$(e).text()+"</li>");
                    });
                    $("#div1").append("</ul>");
                })
            })
        })
    </script>
</head>
<body>
    <input type="text" id="v" />
    <div id="div1">JQuery test</div>
    <button id="btn1">click</button>
</body>
</html>

并且它有效...它接收输出并创建列表，但它在添加所有之前添加了 <li>代码，例如：

<ul></ul><li>item 1</li><li>item 2</li>

我知道，ajax函数会立即返回，并且不会阻止脚本

我该如何解决这个问题？。队列（）？或者怎么样？

Answer 1

您将LI's附加到DIV，而不是UL。

你不能只追加半个元素，它是全部或全部，所以你不能附加一个开始标记，然后在结束标记上，元素作为对象附加：

$(document).ready(function() {
    $("#btn1").on('click', function() {
        $.post("jq.php",{"n" : $("#v").val()}, function(d,s) {

            var ul = $('<ul />');

            $(d).children().each(function(i,e) {
                ul.append("<li>"+$(e).text()+"</li>");
            });

            $("#div1").html(ul);
        });
    });
});

使用ajax和jquery来填充div

1 个答案: