jQuery가 순서대로 추가되지 않습니다.

Question

코드 추가 앱에서 일부 json을 구문 분석하는 데 append()를 사용하고 있습니다. 여기

<div id="rendered"><div id="content"> 
<table></table> 
</div> 
<tr><td>Trailer</td><td>#</td></tr> 
<tr><td>Setup</td><td>#</td></tr> 
<tr><td>Welcome </td><td>#</td></tr> 
<tr><td>Hotspot</td><td>#</td></tr> 
<tr><td>Worship Leader</td><td>#</td></tr> 
<tr><td>Singers</td><td>#</td></tr> 
<tr><td>PA</td><td>#</td></tr> 
<tr><td>Preacher</td><td>#</td></tr> 
<tr><td>Catering</td><td>#</td></tr> 
<tr><td>Livewires 0-3s</td><td>#</td></tr> 
<tr><td>Livewires 3+</td><td>#</td></tr> 
<tr><td>Explorers Infant</td><td>#</td></tr> 
<tr><td>Explorers Juniors</td><td>#</td></tr> 
<tr><td>Youth</td><td>#</td></tr> 
</div> 

그래서 .getJSON 내부의 APPEND가 중간에없는

결과 그는 코드

renderRotaView: function() { 
     $('.tab-button').removeClass('active'); 
     $('#rota-tab-button').addClass('active'); 
     $('#title').html('Rota'); 
     $('#rendered').html('<div id="content"><table>'); 
     $.getJSON('https://www.thegatewaychurch.info/wp-admin/admin-ajax.php',{ action: "ca_rota", service_id: 1 }, function(data) { 
       $.each(data, function(arrayIndex, userObject){ 
         $('#rendered').append('<tr><td>' + userObject.job+'</td><td>'+ userObject.people + '</td></tr>'); 
       }); 

     }); 
     $('#rendered').append('</table></div>'); 
    } 

입니다. 나는 무엇을 잘못하고 있니?

Answer 1

div $('#rendered') 내에 추가 할 예정입니다. 이것을 $('#rendered table')으로 변경하십시오. .getJSON 콜백 내에서 아래의 코드

renderRotaView: function() { 
     $('.tab-button').removeClass('active'); 
     $('#rota-tab-button').addClass('active'); 
     $('#title').html('Rota'); 
     $('#rendered').html('<div id="content"><table>'); 
     $.getJSON('https://www.thegatewaychurch.info/wp-admin/admin-ajax.php',{ action: "ca_rota", service_id: 1 }, function(data) { 
       $.each(data, function(arrayIndex, userObject){ 
         $('#rendered table').append('<tr><td>' + userObject.job+'</td><td>'+ userObject.people + '</td></tr>'); 
       }); 

     }); 
     $('#rendered').append('</table></div>'); 
    } 

Answer 2

그냥 마지막 줄 (으로 .Append)를 이동을 사용

renderRotaView: function() { 
     $('.tab-button').removeClass('active'); 
     $('#rota-tab-button').addClass('active'); 
     $('#title').html('Rota'); 
     $('#rendered').html('<div id="content"><table>'); 
     $.getJSON('https://www.thegatewaychurch.info/wp-admin/admin-ajax.php',{ action: "ca_rota", service_id: 1 }, function(data) { 
       $.each(data, function(arrayIndex, userObject){ 
         $('#rendered table').append('<tr><td>' + userObject.job+'</td><td>'+ userObject.people + '</td></tr>'); 
       }); 
       $('#rendered').append('</table></div>'); 
     }); 
    } 

Answer 3

내 제안은 jQuery를 사용하여 즉석에서 새로운 DOM 요소를 만드는 것입니다 :

var data = [{"job": "Trailer", "people": "Andy Moyle, Maarten Klem"}, { 
 
    "job": "Setup", 
 
    "people": "Andy King, Jenny King" 
 
}, {"job": "Welcome ", "people": "Adam Dixon, Ivory Dixon"}, { 
 
    "job": "Hotspot", 
 
    "people": "Baptisms" 
 
}, {"job": "Worship Leader", "people": "Matt Weatherill"}, { 
 
    "job": "Singers", 
 
    "people": "Tammy Dixon" 
 
}, {"job": "PA", "people": "Maarten Klem"}, {"job": "Preacher", "people": "Liz Hentschel"}, { 
 
    "job": "Catering", 
 
    "people": "Kath Blacklock, Kay Taylor" 
 
}, {"job": "Livewires 0-3s", "people": "Parents"}, { 
 
    "job": "Livewires 3+", 
 
    "people": "Jo Bruce, Ruth Duncombe" 
 
}, {"job": "Explorers Infant", "people": "Pat Amos, Jenny"}, { 
 
    "job": "Explorers Juniors", 
 
    "people": "Gav Raynor, Caleb Vonk" 
 
}, {"job": "Youth", "people": "Baptisms"}]; 
 

 
$('#rendered').append($('<div/>', {id: 'content'}) 
 
       .append($('<table/>') 
 
       .append($('<tbody/>')) 
 
      ) 
 
     ); 
 
$.each(data, function (arrayIndex, userObject) { 
 
    $('#rendered table tbody').append($('<tr/>') 
 
     .append($('<td/>', {text: userObject.job})) 
 
     .append($('<td/>', {text: userObject.people}))); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="rendered"></div>