0

我正在学习 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 函数会立即返回并且不会阻止脚本

我怎样才能解决这个问题？。队列（）？或如何？

4

1 回答 1

1

您将 LI 附加到 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);
        });
    });
});
于 2013-11-13T21:29:49.360 回答