【jQuery】wrapAllが何故か最後だけ効かない(HTML生成されない)

JQUERYを勉強中なのですが、DOM操作が絡むfor文の挙動がいまいち理解できません。
生成したいHTML構成には途中までなってはいるのですが、最後のカウントに差し掛かるとなぜかwrapAllが効いていません。この原因は何なのでしょうか。

試したこと
iのカウントが0から始まっているのが原因と思い頭にi++;を付けて0,1,2,...から1,2,3...にしてみましたが全然関係なかったです。。

  $(document).ready(function () {
    $.getJSON("data/sample_data.json", function(data){
        for(var i in data){
          console.log(i);
          var recruiting=$("<div class=\"recruiting\"></div>");
          recruiting.append("<p class=\"station\">"+data[i].station+"</p>"),
          recruiting.append("<p class=\"date\">"+data[i].date+"</p>"),

          recruiting.append("<span class=\"role\">"+data[i].role+"</span>"), 
          recruiting.append("<span class=\"age\">"+data[i].age+"</span>"),

          $('.recruiting>.station, .recruiting>.date').wrapAll("<div class=\"station_date\"></div>"), //p要素全体をstation_dateで囲む
          $('.recruiting>span').wrapAll("<p class=\"conditions\"></p>"); //span要素全体をconditionsで囲む

          $("#genreTab0 > .wrapper > .recruitingWrap").append(recruiting);

        }
    });
});

josnファイル

[
    {
        "station": "秋田",
        "role": "なまはげ",
        "age": "(60歳～79歳)",
        "date": "2020/7/24"
    },
    {
        "station": "長野",
        "role": "氏",
        "age": "(6歳～13歳)",
        "date": "2020/7/21"
    },
    {
        "station": "愛知",
        "role": "鳥皮",
        "age": "(6歳～13歳)",
        "date": "2020/7/18"
    },
    {
        "station": "富山",
        "role": "ラーメン",
        "age": "(20歳～30歳)",
        "date": "2020/7/30"
    },
    {
        "station": "長崎",
        "role": "カステラ",
        "age": "(20歳～30歳)",
        "date": "2020/7/31"
    },
    {
        "station": "北海道",
        "role": "海産物",
        "age": "(20歳～30歳)",
        "date": "2020/7/31"
    }
]

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

回答1件

ベストアンサー

解答

javascript
1  $(document).ready(function () {
2    $.getJSON("data/sample_data.json", function(data){
3        for(var i in data){
4          console.log(i);
5          var recruiting=$("<div class=\"recruiting\"></div>");
6          recruiting.append("<p class=\"station\">"+data[i].station+"</p>"),
7          recruiting.append("<p class=\"date\">"+data[i].date+"</p>"),
8
9          recruiting.append("<span class=\"role\">"+data[i].role+"</span>"), 
10          recruiting.append("<span class=\"age\">"+data[i].age+"</span>"),
11
12          // wrapAllする前に画面(body要素内)に要素を追加する
13          $("#genreTab0 > .wrapper > .recruitingWrap").append(recruiting);
14
15          // body要素内から要素を検索してwrapAllが行われる
16          $('.recruiting>.station, .recruiting>.date').wrapAll("<div class=\"station_date\"></div>"), //p要素全体をstation_dateで囲む
17          $('.recruiting>span').wrapAll("<p class=\"conditions\"></p>"); //span要素全体をconditionsで囲む
18
19        }
20    });
21});

説明

javascript
1// 生成した要素をbody内に追加してないので
2// この段階では変数recruitingの要素は
3// $('.recruiting')の検索結果に引っ掛かりません
4$('.recruiting>.station, .recruiting>.date').wrapAll("<div class=\"station_date\"></div>"), //p要素全体をstation_dateで囲む
5$('.recruiting>span').wrapAll("<p class=\"conditions\"></p>"); //span要素全体をconditionsで囲む
6
7$("#genreTab0 > .wrapper > .recruitingWrap").append(recruiting);

wrapAllの後に生成した要素をappendしていますが$('.recruiting')で検索するのはbody要素内だと思うので
wrapAllを呼び出してる段階では検索条件
$('.recruiting>.station, .recruiting>.date')
$('.recruiting>span')
にひっかかりません。

1回目のループではbody要素内を検索しても(まだappendしてないので見つからず)wrapAllが行われない
2回目のループで1回目のrecruitingに対してwrapAllが行われる
3回目のループで2回目のrecruitingに対してwrapAllが行われる
.
.

最後のrecruitingはwrapAllが行われないままになる。
という感じだと思います。

投稿2020/07/10 01:50