###質問
親子階層のスライダーを作りにあたり、「too much recursion」のエラーが出てしまいました。
解決方法についてご指南頂けませんでしょうか。
###経緯
HTMLで2世代以上の入れ子が作れず、JavaScriptで親子関係とスライダーを実装してします。
仕組みは、先祖番号を連結した疑似的な入れ子によって親子関係とし、親の「open」クリック後にその子がスライダー表示される。というものです。
Sample:https://jsfiddle.net/nd6jser0/
ところがこの親子の数が増えると、上記のSampleのvar parent_nums = getParentNums(parent);
の部分で「too much recursion」のエラーとなってしまいます。
解決方法がわからず、質問させて頂きました。
###コード
こちらが上記のSampleコードです。
空のancestor=""
に先祖番号が連結され、子がいる場合にのみ「open」ボタンが表示される仕組みです。
html
1<div class="alllists"> 2 <ul> 3 4 <li> 5 <div id="post-7" class="list" parent="0" ancestor="">X家 6 <span class="my_post_num"></span><span class="my_ancestor_num"></span> 7 </div> 8 <ul class="childrens"> 9 <li> 10 <div id="post-39" class="list" parent="7" ancestor="">A 11 <span class="my_post_num"></span><span class="my_ancestor_num"></span> 12 </div> 13 </li> 14 </ul> 15 </li> 16 17 <li> 18 <div id="post-157" class="list" parent="0" ancestor="">Y家 19 <span class="my_post_num"></span><span class="my_ancestor_num"></span> 20 </div> 21 <ul class="childrens"> 22 <li> 23 <div id="post-200" class="list" parent="157" ancestor="">B 24 <span class="my_post_num"></span><span class="my_ancestor_num"></span> 25 </div> 26 </li> 27 <li> 28 <div id="post-354" class="list" parent="157" ancestor="">C 29 <span class="my_post_num"></span><span class="my_ancestor_num"></span> 30 </div> 31 </li> 32 <li> 33 <div id="post-365" class="list" parent="354" ancestor="">D(Cの子) 34 <span class="my_post_num"></span><span class="my_ancestor_num"></span> 35 </div> 36 </li> 37 <li> 38 <div id="post-503" class="list" parent="365" ancestor="">E(Dの子) 39 <span class="my_post_num"></span><span class="my_ancestor_num"></span> 40 </div> 41 </li> 42 <li> 43 <div id="post-514" class="list" parent="503" ancestor="">F(Eの子) 44 <span class="my_post_num"></span><span class="my_ancestor_num"></span> 45 </div> 46 </li> 47 </ul> 48 </li> 49 50 <li> 51 <div id="post-705" class="list" parent="0" ancestor="">Z家 52 <span class="my_post_num"></span><span class="my_ancestor_num"></span> 53 </div> 54 </li> 55 56 </ul> 57</div>
エラーの箇所はJavaScriptの8行目です。
javascript
1//➀先祖番号の連結 2function getParentNums(list) { 3 var parent_num = list.attr('parent'); 4 if (parent_num == "0") { 5 return ["0"]; 6 } 7 var parent = $("#post-" + parent_num); 8 var parent_nums = getParentNums(parent); 9 parent_nums.push(parent_num); 10 return parent_nums; 11} 12$('.list').each(function() { 13 var my_post_num = $(this).attr('id').split('-')[1]; 14 var list = $(this); 15 var parents = getParentNums(list); 16 var my_ancestor_num = parents.join('-'); 17 list.attr('ancestor',my_ancestor_num); 18 //確認のための表示 19 $(this).find('.my_post_num').text(my_post_num); 20 $(this).find('.my_ancestor_num').text(my_ancestor_num); 21}); 22 23 24//➁子がいたらボタンを表示 25var parents = []; 26$(".list").each(function() { 27 var parent_num = $(this).attr('parent'); 28 parents.push( parent_num ); 29}); 30$(".list").each(function() { 31 var my_post_num = $(this).attr('id').split('-')[1]; 32 if (parents.indexOf(my_post_num) >= 0){ 33 $(this).append('<button class="opento">open</button>'); 34 } 35}); 36 37 38//➂openボタンをクリックしたら 39$('body').on("click",".opento",function(){ 40 41 //ボタン表示を切り替えて 42 $(this).removeClass('opento').addClass('closeto').text('close'); 43 44 //子リストを開く 45 var click_post_num = $(this).closest('.list').attr('id').split('-')[1]; 46 var click_ancestor_num = $(this).closest('.list').attr('ancestor'); 47 var child_ancestor_num = click_ancestor_num+'-'+click_post_num; 48 $(".list").each(function() { 49 var ancestor_num = $(this).attr('ancestor'); 50 if (ancestor_num == child_ancestor_num){ 51 $(this).closest('li').slideDown(); 52 } 53 }); 54 55}); 56 57 58//➃closeボタンをクリックしたら 59$('body').on("click",".closeto",function(){ 60 61 //ボタン表示を切り替えて 62 $(this).removeClass('closeto').addClass('opento').text('open'); 63 64 //子リストを閉じる 65 var click_post_num = $(this).closest('.list').attr('id').split('-')[1]; 66 var click_ancestor_num = $(this).closest('.list').attr('ancestor'); 67 var child_ancestor_num = click_ancestor_num+'-'+click_post_num; 68 $(".list").each(function() { 69 var ancestor_num = $(this).attr('ancestor'); 70 if (ancestor_num.match(child_ancestor_num)){ 71 $(this).closest('li').slideUp(); 72 $(this).closest('li').find('.closeto').removeClass('closeto').addClass('opento').text('open'); 73 } 74 }); 75 76}); 77
長くなってしまい申し訳ございませんが、どうすれば親子の数が増えてもvar parent_nums = getParentNums(parent);
の部分でエラーが出ないようになるかについて、ご意見頂ければ幸いです。
どうぞ宜しくお願い致します。