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> 

になり

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>'); 
    } 

だそう.getJSON内部APPENDは真ん中ではありません。私は何を間違えていますか？あなたはdivの$('#rendered')以内にそれを追加しているbecuase

Answer 1

それはです。これを$('#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>