从Javascript对象数组中应用名称/值到HTML列表
Applying Names / Values to HTML List from Javascript Array of Objects
我有一个填充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>
我能够得到以下输出:
<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>
如何在"类"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>
try this
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>");
相关文章:
- 将值从html传递到AngularJS控制器
- 需要将单元格值复制到html表中的其他单元格中
- 将文本值从html页面传递到php页面
- 如何在Thymelaf中将JSON值从控制器传递到HTML
- 如何将复选框值从 HTML 发送到 Node JS
- 如何将值从 HTML 传递到 Node JS
- 如何将 JSON 值追加到 HTML 属性
- 如何将值从javascript传递到html
- 将值从JavaScript传递/显示到HTML页面
- 将带有用户输入值的HTML表单XML保存到javascript变量中
- 将数组的值传递到HTML文本框中
- 如何在 C# 中将值从 HTML 标记/元素传递到代码隐藏
- 从Spring MVC控制器检索ModelMap值到html中的jquery
- 从console.log获取值到html
- 从下拉菜单中添加值到html属性
- 从javascript返回值到html
- 如何在同一页面中从脚本传递动态值到HTML
- 如何通过ajax从php页面返回json值到html页面,以及如何在html页面上显示结果
- 如何使用XMLHttpRequest ajax从cgi Cpp返回值到HTML
- 从Javascript对象数组中应用名称/值到HTML列表