jQuery克隆问题

时间:2011-04-27 16:15:44

标签: jquery clone

有人可以检查一下并告诉我出了什么问题......我只是看不到它:

function getStates(){
var stateData;

$.getJSON("getStateData.php", function(data) {
    stateData = data;
    var theLastGroup = "";

    $("#groupList").empty();
    $("#stateList").empty();

    $.each(stateData, function(i,jsonData) {
        if( theLastGroup != jsonData.groupName )
        {
            $("#listModel").clone(true).removeAttr("id").attr("id", "Group_" + i).removeClass("hidden").appendTo($("#groupList"))
                .find(".url").attr("href", "#"+jsonData.groupName).end()
                .find(".groupName").html(jsonData.groupID);

            $("#groupModel").clone(true).removeAttr("id").removeClass("hidden").attr("id", jsonData.groupName).appendTo($("#stateList"));
        }


        $("#stateModel").clone(true).removeAttr("id").attr("id", jsonData.stateName).removeClass("hidden").appendTo($("#"+jsonData.groupName))
            .attr("sname", jsonData.stateName).attr("lat", jsonData.centerLat).attr("lon", jsonData.centerLon)
            .attr("zom", jsonData.zoom).html(jsonData.stateName);

        if( theLastGroup != jsonData.groupName )
        {
            theLastGroup = jsonData.groupName;
        }
    });
    $("#tabs").tabs();
});

}

...以及最终调用上面的getStates()的HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>My Page</title>

<link href="js_src/css/cupertino/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.js"></script>

<script type="text/javascript" language="javascript" src="js_src/geoxml3.js"></script>
<script type="text/javascript" language="javascript" src="js_src/CTR.js"></script>
<script type="text/javascript" language="javascript" src="js_src/common.js"></script>
<script type="text/javascript" language="javascript" src="js_src/mapNull.js"></script>
<script type="text/javascript" language="javascript" src="js_src/functions.js"></script>

<style type="text/css">
    div.hidden {display:none;}
    li.hidden {display:none;}
    span.hidden {display:none;}
</style>
</head>
<ul>
    <li id="listModel" class="hidden"><a class="url"><span class="groupName"></span></a></li>

    <div id="groupModel" class="hidden"></div>
    <span id="stateModel" class="hidden" sname="name" lat="0.0" lon="0.0" zom="7"></span>
</ul>

<body>
<h4>MyPage</h4>
<div id="tabs" style="height:100px" class="hidden">
    <h5>select a state...</h5>

    <ul id="groupList"></ul>
    <div id="stateList"></div>
</div>

<div id="map" style="float:left;"></div>

</body>
</html>

当页面加载时,从mapNull.js脚本调用getStates()函数...

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

您的代码的这一部分介于</head><body>之间....也就是说,在<body>标记之外:

<ul>
    <li id="listModel" class="hidden"><a class="url"><span class="groupName"></span></a></li>

    <div id="groupModel" class="hidden"></div>
    <span id="stateModel" class="hidden" sname="name" lat="0.0" lon="0.0" zom="7"></span>
</ul>

将其置于<body>内将是迈向这项工作的良好开端:)