Question

我使用append（）来帮助解析cordova app中的一些json。这是他的代码段

 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中的追加不在中间。我做错了什么？

Answer 1

因为你将它附加在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>');
    }

Answer 2

只需在.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 table').append('<tr><td>' + userObject.job+'</td><td>'+ userObject.people + '</td></tr>');
                });
                $('#rendered').append('</table></div>');
        });
    }

Answer 3

我的建议是使用jQuery动态创建新的dom元素：

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery不按顺序追加

3 个答案: