从Javascript对象数组向HTML列表应用名称/值_Javascript_Jquery_Arrays_Object

从Javascript对象数组向HTML列表应用名称/值

javascript jquery arrays object

从Javascript对象数组向HTML列表应用名称/值,javascript,jquery,arrays,object,Javascript,Jquery,Arrays,Object,我有一个填充HTML列表的Javascript对象数组 <html> <head> <script src="jquery-2.1.4.min.js"></script> <script> $(document).ready(function() { // js array of objects var location = [{ City: "Akron", Stat

我有一个填充HTML列表的Javascript对象数组

<html>
<head>
  <script src="jquery-2.1.4.min.js"></script>
  <script>
    $(document).ready(function() {
    // js array of objects
    var location = [{
         City: "Akron",
         State: "Ohio",
         Temperature_1: 50,
         Temperature_2: 65
     }, {
         City: "Charlotte",
         State: "North Carolina",
         Temperature_1: 80,
         Temperature_2: 90
     }];

     // populate webpage with locations and temperatures
     $.each(location, function(key, val) {
       var $locationList = $("<li>" + "<div class='group'>" + val.City + "<div class='both_temperatures '>" + "<div class='temperature'>" + val.Temperature_1 + "</div>" + "<div class='temperature'>" + val.Temperature_2 + "</div></div><div class='state'>" + val.State + "</div></li>");
            $("#locationList").append($locationList);
     });
   });
   </script>
 </head>
 <body>
   <ul id="locationList"></ul>
 </body>
</html>


$（文档）.ready（函数（）{
//js对象数组
变量位置=[{
城市：“阿克伦”，
州：“俄亥俄州”，
温度1:50，
温度2:65
}, {
城市：“夏洛特”，
州：“北卡罗来纳州”，
温度1:80，
温度2:90
}];
//用位置和温度填充网页
$。每个（位置、功能（键、值）{
变量$locationList=$（“”+“+val.City+”+“+val.Temperature\u 1+”+“+val.Temperature\u 2+”+val.State+“”）；
$（“#locationList”）。追加（$locationList）；
});
});

我能够获得以下输出：

<ul id="locationList">
  <li>
    <div class="group">Akron
      <div class="both_temperatures">
        <div class="temperature">50</div>
        <div class="temperature">65</div>
      </div>
      <div class="state">Ohio</div>
    </div>
  </li>
  <li>
    <div class="group">Charlotte
      <div class="both_temperatures">
        <div class="temperature">80</div>
        <div class="temperature">90</div>
      </div>
      <div class="state">North Carolina</div>
    </div>
  </li>
</ul>



阿克伦
50
65
俄亥俄州


夏洛特
80
90
北卡罗来纳州

如何在“类”div中指定名称，在“温度”div中指定值

这是我想要的输出：

<ul id="locationList">
  <li>
    <div class="group" name="Akron">Akron
      <div class="both_temperatures">
        <div class="temperature" value="50">50</div>
        <div class="temperature" value="65">65</div>
      </div>
      <div class="state" name="Ohio">Ohio</div>
    </div>
  </li>
  <li>
    <div class="group" name="Charlotte">Charlotte
      <div class="both_temperatures">
        <div class="temperature" value="80">80</div>
        <div class="temperature" value="90">90</div>
      </div>
      <div class="state" name="North Carolina">North Carolina</div>
    </div>
  </li>
</ul>



阿克伦
50
65
俄亥俄州


夏洛特
80
90
北卡罗来纳州

试试这个

var $locationList = $("<li>" + "<div class='group' name='"+val.City+"'>" + val.City + "<div class='both_temperatures '>" + "<div class='temperature' value='"+val.Temperature_1+"'>" + val.Temperature_1 + "</div>" + "<div class='temperature' value='"+val.Temperature_2+"'>" + val.Temperature_2 + "</div></div><div class='state' name='"+val.State+"'>" + val.State + "</div></li>");

var$locationList=$（“”+“+val.City+”+“+val.Temperature\u 1+”+“+val.Temperature\u 2+”+“+val.State+””）；

完美！谢谢你，奥兹格@马修快乐编码！