将 HTML 解析为 JSON 数组的 Jquery 脚本未按正确顺序附加

Question

大家好，我使用下面的脚本从另一个页面获取 html table 并将其转换为 json array，然后我将其附加到带有参数的新闻源中，但由于某种原因，事情的顺序变得混乱了2-3 个没有意义的项目...我想解决这个问题，并告诉我的脚本只附加最后 10 个项目，我该如何做到这一点？

JS：

$.get( "http://support.jonar.com/support/default.asp?W2423", function(data) {
  var frag = document.createRange().createContextualFragment(data);
  var tbl = (frag.querySelector('.newsfeedtable'));
  document.body.appendChild(tbl);
  var data = $(tbl).tableToJSON();
  tbl.parentNode.removeChild(tbl);


  data.reverse().sort(function(a, b) {
    return a.priority < b.priority || Array.prototype.slice(-5);
  }).forEach(function(d, i) {
    var title = d.title;
    var link = d.link;
    var date = d.date;
    var type = d.type;
    var location = d.location;
    var priority = d.priority;
    if (priority == '1') {
        $('ul.nflist').prepend($('<li>', {
            html: '<a href="' + link + '" target="_blank">' + title + '</a> ' + ' ' + '<span class="category">' + type + '</span>'
        }));
    } else if (location === 'customer_and_partner_portal') {
        $('ul.nflist').append($('<li>', {
            html: '<a href="' + link + '" target="_blank">' + title + '</a> ' + ' ' + '<span class="category">' + type + '</span>'
        }));
    }
    else if (location === 'customer_portal') {
        $('ul.nflist').append($('<li>', {
            html: '<a href="' + link + '" target="_blank">' + title + '</a> ' + ' ' + '<span class="category">' + type + '</span>'
        }));
    }
  });

  //First hide the category tag...
  $(".category").hide();
  // Now lets search for categories and add images
    $('ul.nflist li:contains("social_media")').prepend('<img src="http://www.jonar.com/portal/customer/img/icons/socialmedia.png" />');
    $('ul.nflist li:contains("blog")').prepend('<img src="http://www.jonar.com/portal/customer/img/icons/blogicon.png" />');
    $('ul.nflist li:contains("announcement")').prepend('<img src="http://www.jonar.com/portal/customer/img/icons/announcementnews.png" />');
    $('ul.nflist li:contains("press")').prepend('<img src="http://www.jonar.com/portal/customer/img/icons/inthepress.png" />');
    $('ul.nflist li:contains("paragon")').prepend('<img src="http://www.jonar.com/portal/customer/img/icons/ParagonUpdate.png" />');
    $('ul.nflist li:contains("event")').prepend('<img src="http://www.jonar.com/portal/customer/img/icons/events.png" />');
    $('ul.nflist li:contains("partner")').prepend('<img src="http://www.jonar.com/portal/customer/img/icons/partnerupdate.png" />');
    $('ul.nflist li:contains("wiki")').prepend('<img src="http://www.jonar.com/portal/customer/img/icons/wikiUpdate.png" />');
        // Now if there is an alert please make it red!
    $('ul.nflist li:contains("alert")').addClass("ALERT").prepend('<img src="http://www.jonar.com/portal/customer/img/icons/ALERT.png" />');
});

脚本效果很好，我只想在json array 中附加最后 10 个项目。我知道它的array.prototype,slice(-10)，但不知道如何应用它。

这是表格的样子：

http://jsfiddle.net/sxk0k8kh/

如您所见，文档有一个订单，但在下图中您看到它没有遵循... 表中倒数第二个项目位于错误的位置，并且发生在两个其他。下面是输出的图像。

Answer 1

您的数据项使用.sort() 按优先级排序。排序后具有相同优先级的元素的最终顺序未定义。

由于您只有两个优先级选项：0 和 1，因此您可以删除 sort()：

data.reverse().forEach(function(d, i) {
    //...
  });

但是，如果有多个优先级为1 的元素，它们将再次被反转。

它可以做得更聪明。可以为所有元素分配顺序索引：

data.forEach(function(d, i) {
    // store inside elements their initial order
    d.idx = i;
})

现在该数组可以按优先级排序，但是对于相同的优先级，我们可以检查初始顺序索引：

// sort taking into accound initial order
data.sort(function (a, b) {
    if (parseInt(a.priority) == parseInt(b.priority))
        return b.idx - a.idx; // reverse order of elements with same priority

    // move elements with higher priority on top
    return parseInt(b.priority) - parseInt(a.priority);
});

如果元素a 分别低于、等于或高于b，则比较函数应返回负值、零或正值。因此，优先级的字符串值应转换为整数。

不需要调用.reverse()，因为排序时已经考虑了订单索引。只使用.append() 为每个循环执行主循环，因为优先级较高的元素优先：

data.forEach(function(d, i) {
    //...
    //    $('ul.nflist').append(...);
})