遍历数组并打印html foreach键/值的Javascript / jQuery
[英]iterate through array and print html foreach key/value Javascript / jQuery
问题描述
Okay, so this function is doing everything i expect until i hit the print to html section. 
好的，因此此功能可以完成我期望的所有操作，直到我点击“打印到html”部分为止。 For whatever reason, it will only print out one index at time rather than printing each index in the array. 无论出于何种原因，它只会一次打印出一个索引，而不会打印数组中的每个索引。
The offending portion of this code located @ lines 19-23 in the included snippet. 该代码的违规部分位于所包含的代码段中的第19-23行。
$.each(_services, function(index,value)
{
$('#test').html('<p>' +index+ ":" +value+ '</p>');
});
// services object -- initially EMPTY var _services = {}; $('#serviceList input[type=checkbox]').change( function serviceList() { // For each checkbox inside the #serviceList container, do the following $(this).each( function() { // Set "_key" to id of checkbox var _key = (this).id; // If checkbox is checked -- ADD -- its key/value pair to the "services" object // else checkbox is unchecked -- DELETE -- key/value pair from "services" object (this.checked) ? _services[ _key ] = (this).value : delete _services[ _key ]; // console.log(_services); }); // END foreach() // foreach services print paragraph to display key/value $.each(_services, function(index,value) { $('#test').html('<p>' +index+ ":" +value+ '</p>'); }); // END services foreach }); // END serviceList()
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head <body> <ul id="serviceList"> <!-- changed to list in the tutorial --> <li><input id="id_a" type="checkbox" value="40"> Test A</li> <li><input id="id_b" type="checkbox" value="50"> Test B</li> <li><input id="id_c" type="checkbox" value="60"> Test C</li> <li><input id="id_d" type="checkbox" value="70"> Test D</li> </ul> <div id="test" style="height: 500px; width: 700px; background-color: pink;"></div> </body>
2 个解决方案
解决方案1
3 已采纳 2015-05-02 06:26:02
You are clearing container's innerHTML every time you write new line. 每次编写新行时，您都在清除容器的innerHTML 。 Instead you should append content and clear container before each loop: 相反，您应该在each循环之前附加内容并清除容器：
$('#test').empty();
$.each(_services, function(index,value) {
$('#test').append('<p>' +index+ ":" +value+ '</p>');
});
Check the demo below: 查看下面的演示：
var _services = {}; $('#serviceList input[type=checkbox]').change(function serviceList() { // For each checkbox inside the #serviceList container, do the following $(this).each(function () { // If checkbox is checked -- ADD -- its key/value pair to the "services" object // else checkbox is unchecked -- DELETE -- key/value pair from "services" object this.checked ? _services[this.id] = this.value : delete _services[this.id]; // console.log(_services); }); // END foreach() // foreach services print paragraph to display key/value $('#test').empty(); $.each(_services, function (index, value) { $('#test').append('<p>' + index + ":" + value + '</p>'); }); }); // END serviceList()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="serviceList"> <!-- changed to list in the tutorial --> <li><input id="id_a" type="checkbox" value="40"> Test A</li> <li><input id="id_b" type="checkbox" value="50"> Test B</li> <li><input id="id_c" type="checkbox" value="60"> Test C</li> <li><input id="id_d" type="checkbox" value="70"> Test D</li> </ul> <div id="test" style="height: 150px; background-color: pink;"></div>
解决方案2
1 2015-05-02 06:20:05
If understand your problem correctly, this is because you are overwriting the contents of the #test element each time. 如果正确理解您的问题，那是因为您每次都覆盖#test元素的内容。 How about appending: 如何追加：
$('#test').append('<p>' +index+ ":" +value+ '</p>');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.