Как добавить несколько значений с помощью AJAX

Question

В ответ я получил несколько элементов, я хочу добавить каждый элемент в ответ на класс h2.Мой код просто зацикливает все элементы в одном классе <h2 id="test">

Это моя попытка:

$(function() {

  var $test = $('#test').one();

  $.ajax({

    type: 'GET',
    url: 'test.json',
    contentType: "application/json; charset=utf-8",
    dataType: "json",

    success: function(tests) {
      <!-- <!-- console.log(gares) --> -->

      $.each(tests, function(index, item) {
        $tests.append('<h2>' + item[1] + '</h2>');
      });
    }

  });

});

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>

<h2 id="test"></h2>
<h2 id="test"></h2>

Answer 1

Он зацикливается только на 1 элементе, потому что вы используете id, а не class, попробуйте изменить свой HTML-код на:

<h2 class="test"></h2>
<h2 class="test"></h2>

И тогда ваш JS должен выглядеть следующим образом:

var $test = $('.test')

Я бы предложил прочитать это .