JQuery JSON 数据两次附加到表中

Question

我进行了很好的搜索，堆栈溢出似乎与我遇到的问题不符。

我有一个 JQuery ajax 请求，它以 JSON 的形式从我的服务器收集信息。该数据具有以下结构：

numreturned: 6
result: "success"
startnumber: 0
tickets: {ticket:[,…]}
ticket: [,…]
0: {id:1504, tid:932632, deptid:4, userid:0, name:customer,…}
1: {id:1503, tid:553074, deptid:5, userid:0, name:customer,…}
2: {id:1502, tid:106861, deptid:4, userid:0, name:customer,…}
3: {id:1500, tid:132776, deptid:4, userid:0, name:sales,…}
4: {id:1499, tid:413148, deptid:4, userid:0, name:sales,…}
5: {id:1498, tid:788415, deptid:4, userid:0, name:sales,…}
totalresults: "6"

这只是从 Chrome 开发工具中复制的，目的是为您提供一个想法。首当其冲的工作是由这段 javascript 完成的：

$('#click_tickets').click(
    function(){
        link_make_active('#click_tickets', '#tickets');

        $.get('api_tickets.php?get=tickets', function(data) {

            var data = $.parseJSON(data);

            if( data.tickets.ticket.length === 0 ) {
                $('div#tickets tr.nothing').slideDown();
            } else {

                $('div#tickets tbody').html('');

                $( data.tickets.ticket ).each(function(i,d){
                    $('div#tickets table tbody').append(
                        '<tr><td>' + '</td>' +
                        '<td>' + d.priority + '</td>' +
                        '<td>' + d.date + '</td>' +
                        '<td>' + d.name +'</td>' +
                        '<td>' + d.subject +'</td>' +
                        '<td>' + '</td></tr>'
                    );
                });

            }

        });
    }
);

function link_make_active(link, dash) {
    $('ul.nav li').removeClass('active');
    $(link).parent("li").addClass("active");
    $('.dashboard').slideUp();
    $(dash).slideDown();
}

现在的问题是我在运行 javascript 时得到的结果是这样的：

Priority    Time Opened Client  Subject
Medium  2013-03-26 18:12:04 OVH OVH: Renewal of your services -     
Medium  2013-03-26 18:02:05 Twitter Tweets from 6 others    
Medium  2013-03-25 19:18:05 OVH OVH: Renewal of your services -     
Medium  2013-03-23 17:03:05 sales@.com  Your thawte SSL123 Certificate Is Approved  
Medium  2013-03-23 16:45:04 sales@.com  SSL123 Certificate Approval 
Medium  2013-03-23 16:44:04 sales@.com  Order Information Request for   
Medium  2013-03-26 18:12:04 OVH OVH: Renewal of your services -     
Medium  2013-03-26 18:02:05 Twitter Tweets from 6 others    
Medium  2013-03-25 19:18:05 OVH OVH: Renewal of your services -     
Medium  2013-03-23 17:03:05 sales@.com  Your thawte SSL123 Certificate Is Approved  
Medium  2013-03-23 16:45:04 sales@.com  SSL123 Certificate Approval 
Medium  2013-03-23 16:44:04 sales@.com  Order Information Request for

注意它是如何复制数据的，就好像它已经迭代了两次一样。现在我不认为它已经迭代了两次，因为我改变了 $.each 方法来包含这个：

$( data.tickets.ticket ).each(function(i,d){
    $('div#tickets table tbody').append(
        '<tr><td>' + '</td>' +
        '<td>' + d.priority + '</td>' +
        '<td>' + d.date + '</td>' +
        '<td>' + d.name +'</td>' +
        '<td>' + d.subject +'</td>' +
        '<td>' + '</td></tr>'
    );
    console.log(d); // Added to output to console the individual ticket content on each iteration
});

但是控制台只显示了一轮数据，而不是你想象的两个。只是为了让您不要以为我创建了两个表格或任何内容是页面上的 HTML：

<!-- Tickets Dashboard -->
<div class="dashboard" id="tickets">
    <h1>Ticket Dashboard</h1>
    <table>
        <thead>
            <tr><th>Time Open</th><th>Priority</th><th>Time Opened</th><th>Client</th><th>Subject</th><th>Product</th></tr>
        </thead>
        <tbody></tbody>
        <tr class="nothing"><td colspan="5">No tickets, good work!</td></tr>
    </table>
</div>

这已经让我困惑了很长一段时间，任何帮助都将不胜感激。谢谢大家！

Answer 1

我相信您的表格在您的浏览器中呈现有两个<tbody> 标签。这样做的原因是
<tr class="nothing"><td colspan="5">No tickets, good work!</td></tr> 标签，在<tbody> 之外。

所以...$('div#tickets table tbody').append(... 在两个 tbodies 中的每一个中附加表行。

您可以尝试：
console.log($('div#tickets table tbody').length)，我相信结果会是“2”。 为了防止这种情况，请保留此“没有票，干得好！”在 tbody 内排或使用 $('div#tickets table tbody:eq(0) 选择器仅获取第一个 tbody。