如何在jQuery中嵌套每個循環

我正在創建一個儀表板，我需要獲取父菜單並在每個父菜單下顯示子菜單。我面臨的問題是我首先獲取所有父級菜單，最後顯示子菜單。如何在jQuery中嵌套每個循環

這裏是我的jQuery代碼

$.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); 
      } 
     }); 
     } 
    }); 

    } 

});

來源

2017-10-11 Izuagbala

好吧，這就是異步調用的工作方式 – epascarello

你想要發生什麼？每個家長在展示之前是否等待它的孩子？ – arbuthnott

這是因爲'$ .ajax'是異步的。你可以考慮在$（'＃appName'）。append（input2）;' – TKoL

我想包在一個div父節點和孩子追加到該父div中是這樣的：

https://jsfiddle.net/ukady6ov/

我的例子是在普通的ES5中，但是$.each wo與我的forEach相同。您的$.ajax電話由我的Promise模擬。訣竅在於嵌套元素。

來源

2017-10-11 14:25:02

你的回答看起來很棒，我可以在jquery中看到它。任何機會？ – Izuagbala

今天晚些時候將嘗試使用jQuery創建一個示例。它應該看起來很老實。 –

我想你是說出現的順序是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的順序中顯示更復雜一點。但是，對這個順序的任何管理肯定會涉及強加一些等待條件（上面，我讓父顯示器等待它的孩子） - 你不能實現它只是重新排序$.each循環。

來源

2017-10-11 14:36:18 arbuthnott

如何在jQuery中嵌套每個循環

回答

相關問題