JSONデータを取得し、レスポンシブで並べ替える

以下のようなコンテンツをつくっています。
・960px以上で3カラムレイアウト、それ以下で1カラムになるリキッドレイアウト
・リストの中のそれぞれの要素がトグルで開閉し、その真下のコンテンツがずれる
・PCでは
123
456
789

SPでは
1
2
3
4
...
のように並べたい

発生している問題・エラーメッセージ

960px以上のウィンドウ幅のときにspが表示されてしまいます
エラーメッセージは特にでていません。

該当のソースコード

index.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>Document</title>
8  <style>
9    body{
10      margin: 0 auto;
11    }
12    dl,dt,dd{
13      margin: 0;
14    }
15    dt{
16      background: pink;
17      cursor: pointer;
18    }
19    .clearfix:after {
20      content: ".";
21      display: block;
22      height: 0;
23      clear: both;
24      visibility: hidden;
25    }
26    .container{
27      margin: 0 auto;
28      width: 960px;
29    }
30    .grid{
31      width: 960px;
32    }
33    .grid-col{
34      float: left;
35      width: 320px;
36    }
37    .grid-item{
38      box-sizing: border-box;
39      border: 1px solid #000;
40      width: 320px;
41    }
42    .next_content{
43      padding: 100px;
44      background: #eee;
45    }
46
47  </style>
48  <script
49    src="https://code.jquery.com/jquery-3.3.1.min.js"
50    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
51    crossorigin="anonymous"></script>
52  <script>
53    $(function(){
54      $('dt').on('click',function(){
55        $(this).next('dd').slideToggle();
56      })
57    });
58
59  </script>
60  <script src="./event.js"></script>
61</head>
62<body>
63  <div class="container"></div>
64
65    <div class="next_content">
66      次の要素次の要素次の要素次の要素
67      次の要素次の要素次の要素次の要素次の要素
68      次の要素次の要素次の要素次の要素
69
70    </div>
71
72  </div>
73
74</body>
75</html>
76

event.js
1'use strict';
2
3var mql = window.matchMedia('(min-width: 960px)');
4mql.addListener(widthChange);
5widthChange(mql);
6
7function widthChange(mq){
8  if(mq.match){
9    $.ajax({
10        type: 'GET',
11        url: "./data.json",
12        dataType: "json",
13        success: function(data) {
14          pcEventSort(data);
15        },
16        error: function(){
17          console.log("error");
18        }
19    });
20  }else{
21    $.ajax({
22        type: 'GET',
23        url: "./data.json",
24        dataType: "json",
25        success: function(data) {
26          spEventSort(data);
27        },
28        error: function(){
29          console.log("error");
30        }
31    });
32  }
33}
34
35var pcEventSort = function(data){
36  var grid = "<div class='grid clearfix'><div class='grid-col'></div><div class='grid-col'></div><div class='grid-col'></div></div>";
37
38  $('.container').append(grid);
39
40  for(var i = 0; i < data.event.length; i++){
41    var el = "<div class='grid-item grid-item0" + (i+1) + "'>";
42    el += "<div class='grid-img'><img src='" + data.event[i].image + "'></div>";
43    el += "<dl><dt>" + data.event[i].event_name + "</dt>";
44    el += "<dd style='display:none;'>" + data.event[i].detail + "</dd>";
45    el += "</dl></div>"
46
47    if( (i+1)%3 == 1){
48      $('.grid-col:nth-child(1)').append(el);
49    }else if( (i+1)%3 == 2){
50      $('.grid-col:nth-child(2)').append(el);
51    }else if( (i+1)%3 == 0){
52      $('.grid-col:nth-child(3)').append(el);
53    }
54  }
55}
56var spEventSort = function(data){
57  var grid = "<div class='grid clearfix'></div>";
58  $('.container').append(grid);
59  for(var i = 0; i < data.event.length; i++){
60    var el = "<div class='grid-item grid-item0" + (i+1) + "'>";
61    el += "<div class='grid-img'><img src='" + data.event[i].image + "'></div>";
62    el += "<dl><dt>" + data.event[i].event_name + "</dt>";
63    el += "<dd style='display:none;'>" + data.event[i].detail + "</dd>";
64    el += "</dl></div>"
65    $('.grid').append(el);
66
67  }
68}
69
70$.ajax({
71    type: 'GET',
72    url: "./data.json",
73    dataType: "json",
74    success: function(data) {
75      eventSort(data);
76    },
77    error: function(){
78      console.log("error");
79    }
80});
81

data.json
1{
2  "event":[
3    {
4      "image": "image.png",
5      "event_name": "リストアイテム1",
6      "detail": "詳細をここに"
7    },
8    {
9      "image": "image.png",
10      "event_name": "リストアイテム2",
11      "detail": "詳細をここに"
12    },
13    {
14      "image": "image.png",
15      "event_name": "リストアイテム2",
16      "detail": "詳細をここに"
17    },
18    {
19      "image": "image.png",
20      "event_name": "リストアイテム4",
21      "detail": "詳細をここに"
22    },
23    {
24      "image": "image.png",
25      "event_name": "リストアイテム5",
26      "detail": "詳細をここに"
27    },
28    {
29      "image": "image.png",
30      "event_name": "リストアイテム6",
31      "detail": "詳細をここに"
32    },
33    {
34      "image": "image.png",
35      "event_name": "リストアイテム7",
36      "detail": "詳細をここに"
37    }
38  ]
39}
40

補足情報（FW/ツールのバージョンなど）

ブラウザはmacのChromeで確認しています。

行動規範の内容に同意します

回答1件

自己解決

解決しました。

event.jsのwidthChange関数を以下のように修正しました。

event.js
1  function widthChange(mq){
2    if(mq.matches){
3      $('.container').empty();
4      $.ajax({
5          type: 'GET',
6          url: "./data.json",
7          dataType: "json",
8          success: function(data) {
9            pcEventSort(data);
10          },
11          error: function(){
12            console.log("error");
13          }
14      });
15    }else{
16      $('.container').empty();
17      $.ajax({
18          type: 'GET',
19          url: "./data.json",
20          dataType: "json",
21          success: function(data) {
22            spEventSort(data);
23          },
24          error: function(){
25            console.log("error");
26          }
27      });
28    }
29  }