Question

最初我有这个布局：

<ul id="state_${abbr}"></ul>

在jsp页面上的

我需要将这个JSON映射地图加载到布局中。

coverage.phone.data = {
"CA" : {
    "LOS ANGELES" : "1111", 
    "TORRANCE" : "2222", 
    "SANTA MONICA" : "3333"
}, 
"UT" : {
    "APPLE VALLEY" : "4444",
    "SALT LAKE CITY" : "5555"
}, 
"NV" : {
    "BOULDER CITY" : "6666", 
    "LAS VEGAS" : "7777",
    "CARSON CITY" : "8888"
}

}

最终的结果是这样的：

<ul id="state_CA">
    <li><p>City: <a id="1111" href="#">LOS ANGELES</a></p></li>
    <li><p>City: <a id="2222" href="#">TORRANCE</a></p></li>
    <li><p>City: <a id="3333" href="#">SANTA MONICA</a></p></li>
</ul>
<ul id="state_UT">
    <li><p>City: <a id="4444" href="#">APPLE VALLEY</a></p></li>
    <li><p>City: <a id="5555" href="#">SALT LAKE CITY</a></p></li>
</ul>
<ul id="state_NV">
    <li><p>City: <a id="6666" href="#">BOULDER CITY</a></p></li>
    <li><p>City: <a id="7777" href="#">LAS VEGAS</a></p></li>
    <li><p>City: <a id="8888" href="#">CARSON CITY</a></p></li>
</ul>

它将列出每个州的区域的城市名称和位置ID。 “li”标记中的每个链接都有一个onclick事件。 click函数将触发一些后端调用，该调用在请求中发送位置id，该id将是a标签的id。

查找迭代贴图，我找到了jQuery.each()因此，我编写了以下javascript来填充无序列表“ul”。

// create the li and click function    
var createLink = function(map) {
        var link = ""; 
        $.each(map, function(key, value){
            link += "<li><p>City: <a id=\"" + value + "\" href=\"#\">" + key + "</a></p></li>";
            $("#"+value).click(function(){
                callBackend(this); 
            }); 
        }); 
        return link; 
    };
    // append the li(s) to the ul tags
    $.each(coverage.phone.data, function(i, val){
        var result = createLink(val);
        $("#state_"+i).append(result);  
    });

基本上，我需要迭代JSON地图对象来填充列表。我不特别喜欢用任何点击事件嵌套每个函数。

不幸的是，没有任何内容被附加，我无法弄清楚原因。任何帮助将不胜感激。

Answer 1

看看这个

http://jsfiddle.net/HsZp6/4/

$(function(){ 
    / create the li and click function    
    var createLink = function(map) {
        var link = ""; 
        $.each(map, function(key, value){
            link += "<li><p>City: <a id=\"" + value + "\" href=\"#\">" + key + "</a></p></li>";
            $("#"+value).click(function(){
                callBackend(this); 
            }); 
        }); 
        return link; 
    };
    // append the li(s) to the ul tags
    $.each(coverage.phone.data, function(i, val){
        var result = createLink(val);
        $("#state_"+i).append(result);  
    });
});

Answer 2

您可以使用嵌套调用$.map来执行此操作，该调用将对象或数组转换为数组：

// Iterate over each object containing cities, with "state" as the key:
var html = $.map(data, function(cities, state) {
    // Within each state, iterate over each city, retrieving html for the inner <li>s
    // call .join("") at the end to turn the array of list items into a string.
    var listItems = $.map(cities, function(id, city) {
        return "<li><p>City: <a id='" + id + "' href='#'>" + city + "</a></p></li>";
    }).join("");

    // Build the unordered list using the current state concatenated with the 
    // <li>s we created above.
    return "<ul id='state_" + state + "'>" + listItems + "</ul>";
}).join("");
// Again, call .join("") to turn the entire <ul> into a string.

$("body").append(html);

示例： http://jsfiddle.net/andrewwhitaker/5xpBL/

至于事件处理程序，为什么不使用delegate而不是附加每个事件处理程序？：

$("body").delegate("ul[id^='state_'] a", "click", function (e) {
    callBackend(this);
});

body可能应该替换为您要追加ul的任何容器。

<小时/> 备注：

$.map遍历对象或数组（在本例中为对象）。回调函数的参数是键后跟的值。在您的情况下，外部cities的值为state，密钥为$.map。

在外部$.map调用中，有一个内部调用迭代每个州的城市。在此函数中，第一个参数是城市的id，而第二个参数是城市名称。

每次致电$.map后，都会调用.join("")。这将获取由$.map构建的数组并将其转换为HTML字符串。内部结果用作构建外部结果的一部分（ul）。

在外部$.map的末尾，附加整个HTML字符串。

Javascript迭代地图的地图

2 个答案: