jQuery追加不按順序

我使用append（）來幫助解析cordova應用程序中的某些json。下面是他的代碼片段jQuery追加不按順序

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

導致

<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內追加是不是在中間。請問我做錯了什麼？

來源

2016-09-19 andymoyle

這是因爲你在div $('#rendered')內追加它。將其更改爲$('#rendered table')。使用下面的代碼

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

來源

2016-09-19 20:46:53

這是行得通！爲什麼？！ – andymoyle

beucase，你只是選擇div來追加表格 –

就移動最後一行（.append）.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>'); 
     }); 
    }

來源

2016-09-19 20:52:44 WaldemarIce

這沒有用恐怕 - 每個函數裏面附加的需要是$（'＃rendered table'）至於其他答案 – andymoyle

你說得對。 Rewrited。 – WaldemarIce

我的建議是使用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>

來源

2016-09-19 21:04:11 gaetanoM

jQuery追加不按順序

回答

相關問題