$.each 只显示最后一个元素

Question

我正在尝试使用 AJAX 过滤列表，我遇到了 html 仅显示最后一个元素的问题。我已经阅读了很多类似的 SO 问题，但无济于事。我有变量，所以我不知道是什么问题。

$("#programme").change(function () {
        event.preventDefault();
        var selected_programme = $(this).val();
      $.ajax({
        url: '{% url "gps_list" %}',
        data: {
          "selected_programme": selected_programme,
        },
        dataType: 'json',
        success: function(response) {
          var json = $.parseJSON(response);
              $.each( json, function( key, values ) {

                  var valname = values.fields.name;
                  var valco = values.fields.country;
                  var valpro = values.fields.programme_type;
                  var valwhat = values.fields.what;

                  console.log(valname, key);
                  console.log(valco);
                  console.log(valpro);
                  console.log(valwhat);

                    $("#names").html(valname);
                    $("#country").html(valco);
                    $("#pro_types").html(valpro);
                    $("#whats").html(valwhat);
              });
          },
          error: function(response) {
            alert("oh no!");
          }
      });
    });

HTML

<div class="row">
      <div class="col-md-12">
        <h2 class="my-4" id="names">
          <small id="country"></small>
        </h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="card mb-4">
          <div class="card-body">
            <h2 class="card-title" id="pro_types"></h2>
            <p class="card-text" id="whats"></p>
          </div>
        </div>
      </div>
    </div>

Answer 1

当你这样做时：

$("#names").html(valname);
$("#country").html(valco);
$("#pro_types").html(valpro);
$("#whats").html(valwhat);

您正在覆盖这些元素之前的所有内容。由于您是在循环中执行此操作，因此您自然只能看到最后一次写入的结果。

您需要：

1. 写入不同的元素，或
2. 追加而不是替换（通过append）

具体情况取决于您的 HTML 结构。

---

（现在您已经添加了 HTML。）我会以不同的方式构建它。根本没有任何行（或有一个占位符“加载”行）开始。然后构建行并在您有响应时附加它们。大致如下：

var entryTemplate = 
    '<div>' +
        '<div class="row">' +
            '<div class="col-md-12">' +
                '<h2 class="my-4">' +
                    '<span class="names"></span>' + // *** Made it a span inside the h2
                    '<small class="country"></small>' +
                '</h2>' +
            '</div>' +
        '</div>' +
        '<div class="row">' +
            '<div class="col-md-12">' +
                '<div class="card mb-4">' +
                    '<div class="card-body">' +
                        '<h2 class="card-title pro_types"></h2>' +
                        '<p class="card-text whats"></p>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>';

function success(response) {
    var json = $.parseJSON(response);
    var container = $("#container");
    container.empty(); // Removes any previous rows
    $.each( json, function( key, values ) {
        var fields = values.fields;
        var entry = $(entryTemplate);
        entry.find(".names").text(fields.name);
        entry.find(".country").text(fields.country);
        entry.find(".pro_types").text(fields.programme_type);
        entry.find(".whats").text(fields.what);
        container.append(entry.children());
    });
}

success(
    '[' +
        '{"fields": {' +
            '"name": "Name 1",' +
            '"country": "Country 1",' +
            '"programme_type": "PT 1",' +
            '"what": "What 1"' +
        '}},' +
        '{"fields": {' +
            '"name": "Name 2",' +
            '"country": "Country 2",' +
            '"programme_type": "PT 2",' +
            '"what": "What 2"' +
        '}},' +
        '{"fields": {' +
            '"name": "Name 3",' +
            '"country": "Country 3",' +
            '"programme_type": "PT 3",' +
            '"what": "What 3"' +
        '}}' +
    ']'
);

setTimeout(function() {
    success(
        '[' +
            '{"fields": {' +
                '"name": "Name 4",' +
                '"country": "Country 4",' +
                '"programme_type": "PT 4",' +
                '"what": "What 4"' +
            '}},' +
            '{"fields": {' +
                '"name": "Name 5",' +
                '"country": "Country 5",' +
                '"programme_type": "PT 5",' +
                '"what": "What 5"' +
            '}},' +
            '{"fields": {' +
                '"name": "Name 6",' +
                '"country": "Country 6",' +
                '"programme_type": "PT 6",' +
                '"what": "What 6"' +
            '}}' +
        ']'
    );
}, 2000);

<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>