遍歷數組並打印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