前提・実現したいこと
PHPで動的に生成されたdivとulの親要素をjQueryで生成したいです。
該当のソースコード
●処理前
HTML
1 <div> 2 <div class="group_name">グループ1</div> 3 <ul class="list"> 4 <li>リスト1</li> 5 <li>リスト2</li> 6 </ul> 7 <div class="group_name">グループ2</div> 8 <ul class="list"> 9 <li>リスト1</li> 10 <li>リスト2</li> 11 </ul> 12 (上記を繰り返し) 13 </div>
上記のものを下記のようにグループ分けするjQueryを書きたいです。
●処理後
HTML
1 <div> 2 <div class="group1"> 3 <div class="group_name">グループ1</div> 4 <ul class="list"> 5 <li>リスト1</li> 6 <li>リスト2</li> 7 </ul> 8 </div> 9 <div class="group2"> 10 <div class="group_name">グループ2</div> 11 <ul class="list"> 12 <li>リスト1</li> 13 <li>リスト2</li> 14 </ul> 15 </div> 16 (上記を繰り返し) 17 </div>
試したこと
javascript
1$(function(){ 2 //divとulそれぞれにidを追加 3 $('.group_name , .list').each(function(i){ 4 $(this).attr('id','child' + (i+1)); 5 }); 6 //id指定で要素をつつみこむ(ここ、規則性あるけど別の書き方はできないのでしょうか?) 7 $("#child1,#child2").wrapAll('<div id="group1" />'); 8 $("#child3,#child4").wrapAll('<div id="group2" />'); 9 ・・・ 10});
↓実行結果
HTML
1 <div> 2 <div class="group1"> 3 <div class="group_name" id="child1">グループ1</div> 4 <ul class="list" id="child2"> 5 <li>リスト1</li> 6 <li>リスト2</li> 7 </ul> 8 </div> 9 <div class="group2"> 10 <div class="group_name" id="child3">グループ2</div> 11 <ul class="list" id="child4"> 12 <li>リスト1</li> 13 <li>リスト2</li> 14 </ul> 15 </div> 16 (上記を繰り返し) 17 </div>
上記の方法で一応形にはなるのですが、
・wrapAll()の部分は規則性があるのに手打ち(別の書き方はないのか?)
・そもそも子要素1つ1つにidを与えなくてもいい書き方はないのか?
以上のような疑問を抱いています。
不慣れなもので拙い部分もあるかと思いますが、ご回答いただけると嬉しいです!
回答2件
あなたの回答
tips
プレビュー