遍历数组并打印html foreach键/值的Javascript / jQuery

Question

好的，因此此功能可以完成我期望的所有操作，直到我点击“打印到html”部分为止。 无论出于何种原因，它只会一次打印出一个索引，而不会打印数组中的每个索引。

该代码的违规部分位于所包含的代码段中的第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>

Answer 1

每次编写新行时，您都在清除容器的innerHTML 。 相反，您应该在each循环之前附加内容并清除容器：

$('#test').empty(); 
$.each(_services, function(index,value) {
    $('#test').append('<p>' +index+ ":" +value+ '</p>');
});

查看下面的演示：

 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>

Answer 2

如果正确理解您的问题，那是因为您每次都覆盖#test元素的内容。 如何追加：

   $('#test').append('<p>' +index+ ":" +value+ '</p>');

遍历数组并打印html foreach键/值的Javascript / jQuery

问题描述

2 个解决方案

解决方案1
3 已采纳 2015-05-02 06:26:02

解决方案2
1 2015-05-02 06:20:05

遍历数组并打印html foreach键/值的Javascript / jQuery

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-05-02 06:26:02

解决方案2 1 2015-05-02 06:20:05

解决方案1
3 已采纳 2015-05-02 06:26:02

解决方案2
1 2015-05-02 06:20:05