Jquery .each 循环外壳答案

【问题标题】：Jquery .each loop enclosureJquery .each 循环外壳
【发布时间】：2013-12-12 04:05:23
【问题描述】：

这个脚本基本上是序列化一个表单并在 api 上获取请求并检索 json 响应。接收到的响应可以通过所述表单添加附加参数来修改，并序列化并发送到 api 等。现在每次我按下提交时，屏幕上只会显示最后一个元素。我尝试了附加功能，但它创建了相同设置项目的副本，而不是刷新页面上的项目。我认为这是一个可能微不足道的外壳问题，但我一般不精通 jquery 和 java 脚本。

<script>
$(document).ready(function() {
  var APISOURCE = '../api/software/?format=json'
  $('#filterform').on('submit',function(e){
    e.preventDefault();
    var query = $('#filterform').serialize();
    console.log(query);
        $.ajax({
                datatype: 'json',
                url: APISOURCE,
                query: query,
                success: function(data){
                    console.log(data.results[0]);
                    $.each(data.results, function(i,results){
                        content = '<p>' + results.developer + '</p>';
                        content += '<br/>';
                        //$(content).empty("#softwarelist").appendTo("#softwarelist");
                        $("#softwarelist").html(content);
                      });


                }/* response processing function ends */
            });/* ajax function ends */

  });
});
</script>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

尝试通过连接每个结果来构建一个字符串，并在循环结束时将其设置为您的 div：

另外，content 将是未定义的 - 我假设您的意思是 results.content 从您的 AJAX 返回返回。

var content;
$.each(data.results, function(i,results){
    content += '<p>' + results.developer + '</p><br>' + results.content;
});
$('#softwarelist').html(content);

【讨论】：

一定要初始化内容：var content = '';
当您进入each() 循环时，您现在拥有的content 是undefined。
看看这个JSFiddle。如果你尝试在一个未定义的变量上使用+=，你会得到你不想要的东西。在这种情况下，在第一次循环迭代之后，您将拥有 content === 'undefined<p>...'

【解决方案2】：

你应该编辑如下代码：

  $("#softwarelist").html(''); //remove old html first
  $.each(data.results, function(i,results){
                    content = '<p>' + results.developer + '</p>';
                    content += '<br/>';
                    //$(content).empty("#softwarelist").appendTo("#softwarelist");
                    $("#softwarelist").append(content); //append new content
  });

【讨论】：

【解决方案3】：

将内容作为数组并将元素推入该数组以添加所有值并稍后显示该数组

【讨论】：