jqueryで各ループをネストする方法

Question

私は親メニューを取得し、各親メニューの下に子メニューを表示する必要があるダッシュボードを作成しています。私が直面している問題は、すべての親メニューを最初に取得し、子メニューを最後に表示することです。 HERE

はMY jQueryのCODE

$.each(data, function(index, value) { 

    if (value.ParentId == 0) { 
    //Get and display the parent Menu 
    var input = ('<label><input type="checkbox" name="chk[]" value=' + value.Id + ' />' + " " + value.MenuName + " (PARENT) " + '</label><br>'); 
    $('#appName').append(input); 
    $.ajax({ 
     method: 'GET', 
     //Fetch the children menus 
     url: 'http://localhost:61768/api/users/GetUrlChildren?Id=' + value.Id, 
     headers: { 
     'Authorization': 'Basic ' + btoa(localStorage.getItem('AppId') + ":" + localStorage.getItem('ApiKey')) 
     }, 
     success: function(newData) { 
     $.each(newData, function(index2, value2) { 
      if (Object.keys(newData).length == 0) { 
      alert("No Url has been added"); 
      } else { 
      //Display the children menu. 
      var input2 = ('<label><input type="checkbox" name="chk[]" value=' + value2.Id + ' />' + " " + value2.MenuName + " (CHILD) " + '</label><br>'); 
      $('#appName').append(input2); 
      } 
     }); 
     } 
    }); 

    } 

}); 

Answer 1

私はdivの中の親ノードをラップして、この親のdivに子を追加します何かのように：

https://jsfiddle.net/ukady6ov/

私の例は通常のES5ですが、$.eachは私のforEachと同じ方法です。 $.ajaxコールはPromiseでシミュレートされます。トリックは要素の入れ子になっています。

Answer 2

は、私はあなたが出現順がparentA、parentB、parentC、childA1、childA2、childB1、childB2であることを言っていると思いますが、...など、あなたがparentA、childA1、childA2、parentBが何をしたいです、 ...

すべての子どもたちが準備が整うまで、親の出現を遅らせることが合理的に簡単な修正があります：

$.each(data, function(index, value) { 

    if (value.ParentId == 0) { 
    //Get and display the parent Menu 
    var input = $('<label><input type="checkbox" name="chk[]" value=' + value.Id + ' />' + " " + value.MenuName + " (PARENT) " + '</label><br>'); 
    input.css('display', 'none'); // hidden by default 
    $('#appName').append(input); 
    $.ajax({ 
     method: 'GET', 
     //Fetch the children menus 
     url: 'http://localhost:61768/api/users/GetUrlChildren?Id=' + value.Id, 
     headers: { 
     'Authorization': 'Basic ' + btoa(localStorage.getItem('AppId') + ":" + localStorage.getItem('ApiKey')) 
     }, 
     success: function(newData) { 
     $.each(newData, function(index2, value2) { 
      if (Object.keys(newData).length == 0) { 
      alert("No Url has been added"); 
      } else { 
      //Display the children menu. 
      var input2 = ('<label><input type="checkbox" name="chk[]" value=' + value2.Id + ' />' + " " + value2.MenuName + " (CHILD) " + '</label><br>'); 
      $('#appName').append(input2); 
      } 
     }); 
     // now reveal the parent 
     input.css('display', 'inline-block'); // or block etc if your css requires 
     } 
    }); 

    } 

}); 

これはおそらくあなたが望む外観の順になりますが。最初の親が最初に表示されることを保証するものではありませんが、その可能性は高いです。

$.eachに渡された順序で両親が明らかになることを保証したい場合は、もう少し複雑です。しかし、このオーダーの管理には何らかのWAIT条件を課すことは間違いありません（上記、私は親ディスプレイが子どもを待つようにしました）。$.eachループを並べ替えるだけでは達成できません。