编辑

Question

我需要在网页上显示按地区分隔的状态列表。

我需要显示地区的标题＆＃34; West＆＃34;然后将状态显示为<ul>。

我确信有很多方法可以实现这一点，但我必须使用jQuery。

var states = {  
  "West":[
    "Alaska",
    "Arizona",
    "California",
    "Hawaii",
    "Idaho",
    "Nevada",
    "Oregon",
    "Utah",
    "Washington"
  ],
  "Central":[
    "Colorado",
    "Illinois",
    "Indiana",
    "Iowa",
    "Kansas",
    "Michigan",
    "Minnesota",
    "Missouri",
    "Montana",
    "Nebraska",
    "New Mexico",
    "North Dakota",
    "Ohio",
    "Oklahoma",
    "South Dakota",
    "Texas",
    "Wisconsin",
    "Wyoming"
  ],
  "East":[
    "Connecticut",
    "Delaware",
    "Kentucky",
    "Maine",
    "Maryland",
    "Massachusetts",
    "New Hampshire",
    "New Jersey",
    "New York",
    "Pennsylvania",
    "Rhode Island",
    "Vermont",
    "Virginia",
    "West Virginia"
  ],
  "South":[
    "Alabama",
    "Arkansas",
    "Florida",
    "Georgia",
    "Louisiana",
    "Mississippi",
    "North Carolina",
    "South Carolina",
    "Tennessee"
  ]
};

这是我到目前为止所做的事情：

var states = window.states;                                                         
var west = $.parseJSON( states ).West;

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

for ( var i = 0; i < west.length; i++ ) {
    var $line = $( "<tr></tr>" );
    $line.append( $( "<td></td>" ).html( west ) );
    $table.append( $line );`
}

$table.appendTo( '.west' );

Answer 1

使用for循环。例如，要显示每个区域中的状态，

var states = {  
  "West":[
    "Alaska",
    "Arizona",
    "California",
    "Hawaii",
    "Idaho",
    "Nevada",
    "Oregon",
    "Utah",
    "Washington"
  ],
  "Central":[
    "Colorado",
    "Illinois",
    "Indiana",
    "Iowa",
    "Kansas",
    "Michigan",
    "Minnesota",
    "Missouri",
    "Montana",
    "Nebraska",
    "New Mexico",
    "North Dakota",
    "Ohio",
    "Oklahoma",
    "South Dakota",
    "Texas",
    "Wisconsin",
    "Wyoming"
  ],
  "East":[
    "Connecticut",
    "Delaware",
    "Kentucky",
    "Maine",
    "Maryland",
    "Massachusetts",
    "New Hampshire",
    "New Jersey",
    "New York",
    "Pennsylvania",
    "Rhode Island",
    "Vermont",
    "Virginia",
    "West Virginia"
  ],
  "South":[
    "Alabama",
    "Arkansas",
    "Florida",
    "Georgia",
    "Louisiana",
    "Mississippi",
    "North Carolina",
    "South Carolina",
    "Tennessee"
  ]
};
var html = "<p>States by region</p>";
for (var region in states) {
  html += "<ul>States in the " + region + " region: ";
  for (var state in states[region]) {
    html += "<li>" + states[region][state] + "</li>";
  }
  html += "</ul>";
}
$('#states').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="states">

</div>

此代码允许您在不知道每个区域定义为的情况下迭代每个区域及其子区域。

编辑

更改为遍历整个状态对象

Answer 2

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        $(document).ready(function () {
            var states = {
                "West": [
                  "Alaska",
                  "Arizona",
                  "California",
                  "Hawaii",
                  "Idaho",
                  "Nevada",
                  "Oregon",
                  "Utah",
                  "Washington"
                ],
                "Central": [
                  "Colorado",
                  "Illinois",
                  "Indiana",
                  "Iowa",
                  "Kansas",
                  "Michigan",
                  "Minnesota",
                  "Missouri",
                  "Montana",
                  "Nebraska",
                  "New Mexico",
                  "North Dakota",
                  "Ohio",
                  "Oklahoma",
                  "South Dakota",
                  "Texas",
                  "Wisconsin",
                  "Wyoming"
                ],
                "East": [
                  "Connecticut",
                  "Delaware",
                  "Kentucky",
                  "Maine",
                  "Maryland",
                  "Massachusetts",
                  "New Hampshire",
                  "New Jersey",
                  "New York",
                  "Pennsylvania",
                  "Rhode Island",
                  "Vermont",
                  "Virginia",
                  "West Virginia"
                ],
                "South": [
                  "Alabama",
                  "Arkansas",
                  "Florida",
                  "Georgia",
                  "Louisiana",
                  "Mississippi",
                  "North Carolina",
                  "South Carolina",
                  "Tennessee"
                ]
            };
            var west = states.West;
            var $table = $('<table></table>');
            for (var i = 0; i < west.length; i++) {
                var $line = $("<tr></tr>");
                $line.append($("<td></td>").html(west[i]));
                $table.append($line);
            }
            $table.appendTo('.west');
        });

    </script>
</head>
<body>
    <div class="west"></div>
</body>
</html>

使用jQuery我需要将这个JS对象打印到html

2 个答案:

编辑