我正在从列表中检索项目，只想在页面上显示4项。

Question

我从一个包含5个项目的列表中检索项目，但我只想显示4个项目，每次添加一个新项时，我希望新项先显示，然后再显示其他3个项，第五个项不能显示。

我尝试过.last()，隐藏()，但它们都没有帮助我实现我想要的

<div id="phishing" class="row">
<!--Injected content-->
</div>

$.ajax({
        url: "/cyberSecurity/_api/web/lists/GetByTitle('phishingExamples')/items",
        method: 'GET',
        headers: {
            'Accept': 'application/json; odata=verbose'
        },
        success: function(data) {
            var items = data.d.results;
            var phishing = $('#phishing');
            var phishingCards;
            for (var i = 0; i <4; i++) {
                phishingCards = '<div class="col-sm-6 col-md-6 col-lg-3 mb-3">' +
                   '<div style="background-color: #004685; height: 340px; position: relative;" class="card backImg2 ">' +
                    '<div style="color: #fff;" class="card-body ">' + 
                    '<h5 style="color: #ffe01a;" class="card-title ">' + items[i].Title + '</h5>' +
                    '<p style="margin-bottom: -5px;" class="card-text ">' + items[i].Description + '</p>' +
                    '<div style="width: 100%;  margin: 0 auto; position: absolute; bottom: 0;right: 0" class="row "><a style=" background-color: #ffe01a!important;  color: black!important; border: none; width: 100%;" href= "'+ items[i].Image.Url +'"class="btn btn-primary btn-sm"  target=_blank>More Info</a></div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';                

                phishing.prepend(phishingCards);
            }
        },
        error: function(data) {
            console.log('Error: ' + data);
        }
    }); // End Service Icons  //End Service Icons

我希望在页面上只显示4个项目，即使有超过4个项目。我也希望新的项目能先展示出来。

实际上，当我将循环更改为items.length时，首先会得到新项，但我只想显示4个条目。在这里输入图像描述

Answer 1

数组最后有一个最新的项，但是您跳过了它，因为您只显示了前4个项。不要从0开始，从长度中减去4，并确保它至少是0。

let start = Math.max(0, items.length-4);
for (let i = start; i < items.length; i++) {

Answer 2

在这里，我将prepend()改为append()

$.ajax({
        url: "/cyberSecurity/_api/web/lists/GetByTitle('phishingExamples')/items",
        method: 'GET',
        headers: {
            'Accept': 'application/json; odata=verbose'
        },
        success: function(data) {
            var items = data.d.results;
            var phishing = $('#phishing');
            var phishingCards;
            for (var i = 0; i <4; i++) {
                phishingCards = '<div class="col-sm-6 col-md-6 col-lg-3 mb-3">' +
                   '<div style="background-color: #004685; height: 340px; position: relative;" class="card backImg2 ">' +
                    '<div style="color: #fff;" class="card-body ">' + 
                    '<h5 style="color: #ffe01a;" class="card-title ">' + items[i].Title + '</h5>' +
                    '<p style="margin-bottom: -5px;" class="card-text ">' + items[i].Description + '</p>' +
                    '<div style="width: 100%;  margin: 0 auto; position: absolute; bottom: 0;right: 0" class="row "><a style=" background-color: #ffe01a!important;  color: black!important; border: none; width: 100%;" href= "'+ items[i].Image.Url +'"class="btn btn-primary btn-sm"  target=_blank>More Info</a></div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';                

                phishing.append(phishingCards);
            }
        },
        error: function(data) {
            console.log('Error: ' + data);
        }
    }); // End Service Icons  //End Service Icons

或者，在这里，我更改了for循环，使其以相反的顺序运行，同时保留了prepend()。

$.ajax({
        url: "/cyberSecurity/_api/web/lists/GetByTitle('phishingExamples')/items",
        method: 'GET',
        headers: {
            'Accept': 'application/json; odata=verbose'
        },
        success: function(data) {
            var items = data.d.results;
            var phishing = $('#phishing');
            var phishingCards;
            for (var i = 4; i < -1; i--) {
                phishingCards = '<div class="col-sm-6 col-md-6 col-lg-3 mb-3">' +
                   '<div style="background-color: #004685; height: 340px; position: relative;" class="card backImg2 ">' +
                    '<div style="color: #fff;" class="card-body ">' + 
                    '<h5 style="color: #ffe01a;" class="card-title ">' + items[i].Title + '</h5>' +
                    '<p style="margin-bottom: -5px;" class="card-text ">' + items[i].Description + '</p>' +
                    '<div style="width: 100%;  margin: 0 auto; position: absolute; bottom: 0;right: 0" class="row "><a style=" background-color: #ffe01a!important;  color: black!important; border: none; width: 100%;" href= "'+ items[i].Image.Url +'"class="btn btn-primary btn-sm"  target=_blank>More Info</a></div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';                

                phishing.prepend(phishingCards);
            }
        },
        error: function(data) {
            console.log('Error: ' + data);
        }
    }); // End Service Icons  //End Service Icons

这两种方法中的任何一种都应该反转数组中的项的顺序，因为它们被打印到dom。这是假设您的现有代码只正确地打印了4个项，除了在for循环中将items.length设置为条件(在这些示例中没有这样做)之外，没有看到您指定它打印的项超过4个。

另外，我不知道items数组的结构是什么，但是如果该数组中的对象具有日期或时间戳属性，那么在运行for循环之前，可以先根据该属性对数组进行排序，这样就可以确定项的顺序。但是，这个答案是在假设只有标题、描述和图像作为对象属性的前提下运行的，因为这是我在代码中看到的全部内容。

告诉我这是怎么回事！