2017-07-27 52 views
1

我有了虛擬數據的JavaScript對象:如何循環一個對象一次給我5個項目?

var movies = [ 
    { 
     "title": "New School", 
     "description": "Donec a sodales lorem. Curabitur at nulla nec sem volutpat accumsan placerat nec elit. Ut bibendum dui vitae purus fringilla rhoncus. Praesent volutpat felis vitae felis ultricies rhoncus. Nulla maximus nibh vel enim ullamcorper aliquam. Nam efficitur est nibh, id mollis nisl ullamcorper et.", 
     "picture": "img.png" 
    }, 
    { 
     "title": "Old skool", 
     "description": "Aenean iaculis vehicula sollicitudin. Sed convallis, massa sit amet venenatis volutpat, arcu dolor volutpat neque, in lobortis arcu velit hendrerit ante. Quisque accumsan luctus enim eu aliquam. Quisque et dolor est.", 
     "ImageLink": "img.png" 
    }, 
] 

我希望能夠加載一5項嵌套的對象,但在隨後的未來五年的對象添加了未來五年的項目。

到目前爲止,我有這樣的:

$(document).ready(function(){ 
    for(var i = 0; i < 5; i++) { 
     var obj = courses[i];  
     $("#demo").append("<h2>" + obj.title + "</h2>"); 
     $("#demo").append("<p>" + obj.description + "</p>"); 
    } 
}); 

此功能在輸出對象中的第一個5個項目。

在這個函數中,我試圖讓這個按鈕添加對象中的下5個項目,然後再次點擊按鈕時再下5個項目。但它只是輸出對象中剩餘的項目。

$(".button").click(function() { 
    for(var i = 5; i < courses.length; i++) { 
     var obj = courses[i];  
     $("#demo").append("<h2>" + obj.Title + "</h2>"); 

     $("#demo").append("<p>" + obj.ShortDescription + "</p>"); 
    } 
}); 

的codepen是https://codepen.io/mrsalami/pen/ZJGZao

+0

*,但它只是輸出對象中的其餘項目*。這是因爲'for(var i = 5; i Rajesh

+0

@Rajesh哦我明白了,但我該如何添加接下來的5個項目 –

+0

正確的方法是將計數器變量作爲全局變量,並在循環中從'counter'開始,並以'計數器+限制「,其中限制是」5「。 – Rajesh

回答

1

創建環路以外的變量來跟蹤到目前爲止您檢索哪些項目,並使用您的循環內部的變量。

var items_retrieved = 0; 

$(document).ready(function() { 
    for (; items_retrieved < 5; items_retrieved++) { 
    var obj = courses[items_retrieved]; 
    $("#demo").append("<h2>" + obj.Title + "</h2>"); 
    $("#demo").append("<p>" + obj.ShortDescription + "</p>"); 
    } 
}); 

$(".button").click(function() { 
    for (var i = items_retrieved; i < items_retrieved + 5; i++) { 
    var obj = courses[i]; 
    $("#demo").append("<h2>" + obj.Title + "</h2>"); 

    $("#demo").append("<p>" + obj.ShortDescription + "</p>"); 
    } 
    items_retrieved += 5; 
}); 
0

我想你可以通過這種方式使用。

$(".button").click(function() { 
    for(var i = 5 , j = 0 ; i > 0 ; i-- , j++) { 
     var obj = courses[j];  
     $("#demo").append("<h2>" + obj.Title + "</h2>"); 

     $("#demo").append("<p>" + obj.ShortDescription + "</p>"); 
    } 
}); 
1

這不是一個很好的解決方案,但它應該讓你開始。您需要某種計數器來跟蹤已顯示的元素數量。

var courses = [ 
 
    { 
 
    Title: "Crime Risk New", 
 
    ShortDescription: 
 
     "Donec a sodales lorem. Curabitur at nulla nec sem volutpat accumsan placerat nec elit. Ut bibendum dui vitae purus fringilla rhoncus. Praesent volutpat felis vitae felis ultricies rhoncus. Nulla maximus nibh vel enim ullamcorper aliquam. Nam efficitur est nibh, id mollis nisl ullamcorper et.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Alternative Ireland Mergers Statements Practice", 
 
    ShortDescription: 
 
     "Aenean iaculis vehicula sollicitudin. Sed convallis, massa sit amet venenatis volutpat, arcu dolor volutpat neque, in lobortis arcu velit hendrerit ante. Quisque accumsan luctus enim eu aliquam. Quisque et dolor est.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Security Leadership Social", 
 
    ShortDescription: 
 
     "Vivamus pellentesque semper arcu eu egestas. Fusce lacinia velit quam, a rhoncus turpis blandit sit amet. Vivamus eros mi, malesuada vitae facilisis at, tincidunt in urna. Morbi sodales at nulla ac commodo.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Results regulation Financial Governance and Within", 
 
    ShortDescription: 
 
     "In enim nunc, tempor a congue ut, interdum consequat tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla luctus sodales nulla, at eleifend nibh fermentum eget.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "UK Leadership Professional Instruments to", 
 
    ShortDescription: 
 
     "Ut a congue quam, eu hendrerit dolor. Ut porta in nunc id porttitor. Pellentesque iaculis pretium vulputate. Aenean eu neque vestibulum, semper leo sed, porttitor sapien. Etiam in justo eu risus scelerisque ultricies. Nunc commodo est in scelerisque semper.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Workload Witness Data", 
 
    ShortDescription: "Vestibulum maximus et arcu eget congue. Phasellus", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Business Savings Control", 
 
    ShortDescription: "Etiam elementum auctor tellus.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Donor Business Professionalism Positioning", 
 
    ShortDescription: 
 
     "Phasellus ultrices tellus at gravida tempor. Mauris in augue dolor. Pellentesque sit amet mauris vehicula, eleifend tellus eget, cursus lectus. Suspendisse sed convallis ex, non tristique tellus.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Performance Work Preventing Workload Mergers Data Strategy", 
 
    ShortDescription: 
 
     "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut ipsum ac sapien mollis ultrices vehicula magna sed augue feugiat, eget interdum dui feugiat. Integer erat augue, lacinia vel ex a, consectetur lacinia nulla.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Enterprise Compliance Introduction and", 
 
    ShortDescription: 
 
     "Nullam cursus, leo in cursus feugiat, leo urna mollis dui, eu pretium augue orci ut lorem.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Performance Combinations Continuous BPM Data Corporate", 
 
    ShortDescription: 
 
     "Donec ornare nisi nec viverra lacinia. Ut in pharetra est. Suspendisse vestibulum, nisi eget bibendum porta, urna erat fermentum mi, ac efficitur turpis nisi ut lacus.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "and Building Spreadsheet International", 
 
    ShortDescription: 
 
     "Phasellus odio arcu, lobortis vel dui et, tincidunt tristique mi. Aenean et malesuada nibh.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Partnership Acquisitions Finance Teams for Gift Strategy", 
 
    ShortDescription: 
 
     "Donec et arcu a augue sollicitudin congue. Ut suscipit, dui at ultrices convallis, purus mauris dignissim lacus, a dignissim dui justo eu turpis. Proin eget orci porttitor, convallis nibh sit amet, posuere lacus. Nunc vestibulum at ante sit amet dignissim. Curabitur quis quam tortor.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "for The Briefing Financial UK in", 
 
    ShortDescription: 
 
     "Donec volutpat justo maximus lorem volutpat, eget aliquam dolor cursus. Maecenas porta fermentum rhoncus. Aliquam porttitor enim iaculis congue dignissim. Aenean at ante a nisl mattis efficitur. Morbi vulputate a lorem nec condimentum.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Ideas Management Mapping Using Skills and", 
 
    ShortDescription: 
 
     "Aliquam sollicitudin, nunc vitae laoreet mattis, justo ante congue tortor, nec tempus tellus metus consequat enim. Ut eget urna euismod, luctus augue laoreet, rutrum dui. Vivamus egestas eleifend arcu facilisis gravida.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Career Negotiating Managing Buying change? your Tax", 
 
    ShortDescription: 
 
     "Donec purus odio, bibendum in rutrum sit amet, tincidunt a justo. Curabitur quis blandit elit. Cras blandit felis scelerisque luctus vulputate. Etiam purus mauris, mattis bibendum metus a, vehicula consequat enim.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Mergers and Assessing Accountants and Ethical the", 
 
    ShortDescription: 
 
     "Donec vel neque consequat, tincidunt risus quis, sodales erat. Donec imperdiet urna in sollicitudin auctor. Donec tristique dolor vel elit pulvinar imperdiet. Nulla id nisi feugiat, tempus neque quis, dignissim augue.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Solving Mergers Business", 
 
    ShortDescription: 
 
     "Donec maximus suscipit tellus. Sed dolor metus, lobortis in ultricies eget, tincidunt in erat. Curabitur faucibus hendrerit ex in eleifend. Maecenas ligula mauris, bibendum vitae nisl eget, mattis consequat mi.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Promoting for Basics Accounting", 
 
    ShortDescription: 
 
     "Morbi sit amet diam a dui molestie venenatis ac vitae tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Building UK GAAP World", 
 
    ShortDescription: "Nunc consequat dictum rutrum.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Principles New Professional Accountants", 
 
    ShortDescription: 
 
     "Mauris luctus neque sit amet odio posuere porta. Aliquam interdum augue dui, at lobortis eros ultrices id. Donec mattis posuere dui vitae sagittis. Sed tempor aliquam nisi, vel semper odio.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Transformation Charity Solving The Dynamic Guide", 
 
    ShortDescription: 
 
     "Duis leo lectus, lacinia sodales semper eget, convallis ut nibh. In blandit orci lectus, at imperdiet urna posuere nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel urna quis est varius auctor.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Megatrends and Advantage", 
 
    ShortDescription: "Morbi consequat eu magna quis bibendum.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "The Law Protection Control", 
 
    ShortDescription: 
 
     "Proin lobortis, ante ut vestibulum posuere, tortor mauris iaculis nulla, ac commodo odio quam eu arcu. Suspendisse at fringilla purus, vitae pharetra ante. Suspendisse mattis rhoncus gravida. Etiam tincidunt elementum condimentum. Vivamus id sagittis erat, tincidunt tristique elit.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Corporate Ethical", 
 
    ShortDescription: 
 
     "Vivamus et vulputate ipsum, id vulputate nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lacus risus, egestas nec magna ornare, aliquam luctus nibh. Morbi vel ullamcorper ex.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Succession IFRS IFRS Cyber for Integrated and", 
 
    ShortDescription: 
 
     "Mauris molestie nunc ut efficitur tincidunt. Quisque consectetur tincidunt lorem, sit amet semper purus pellentesque non. Pellentesque et volutpat sapien.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "for Reacting Understanding SME Results The", 
 
    ShortDescription: 
 
     "Praesent ac sagittis purus. Etiam lacinia massa sed felis pulvinar, vitae consectetur tellus iaculis. Nullam quis vulputate turpis.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Development with Accounting Issues and", 
 
    ShortDescription: 
 
     "Maecenas non pellentesque neque. Donec maximus bibendum lectus vel eleifend. Nullam fringilla vitae ex vel eleifend. Nunc aliquet tempus sapien vitae consequat. Donec pretium ipsum ut nunc ornare, a tincidunt odio bibendum.", 
 
    ImageLink: "image1.jpg" 
 
    }, 
 
    { 
 
    Title: "Tips Financial Planning", 
 
    ShortDescription: 
 
     "Proin congue semper fringilla. Cras risus ipsum, scelerisque sit amet nunc in, aliquam volutpat neque. Maecenas imperdiet nunc sed libero congue, non fringilla sapien ultricies.", 
 
    ImageLink: "image1.jpg" 
 
    } 
 
]; 
 

 
$(document).ready(function() { 
 
    appendRows(); 
 
}); 
 
$(".button").click(function() { 
 
    appendRows(); 
 
}); 
 
var k = 0; 
 
function appendRows() { 
 
    for (var i = 0; i < 5; i++) { 
 
    if (courses[k] != null) { 
 
     var obj = courses[k]; 
 
     $("#demo").append("<h2>" + obj.Title + "</h2>"); 
 
     $("#demo").append("<p>" + obj.ShortDescription + "</p>"); 
 
     k++; 
 
    } 
 
    } 
 
} 
 
console.log(courses.length);
#demo > p{ 
 
    margin-bottom:100px; 
 
} 
 

 
.button { 
 
    background-color: blue; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-weight:bold; 
 
    font-size:16px; 
 
    border-radius: 5px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="demo"></p> 
 
<a href="#!" class="button">Link Button</a>

0

使用一個局部變量i,以確保您有不到5

使用全局變量j跟蹤哪個位置,你都在。

var courses = [{ 
 
    "Title": "Crime Risk New", 
 
    "ShortDescription": "Donec a sodales lorem. Curabitur at nulla nec sem volutpat accumsan placerat nec elit. Ut bibendum dui vitae purus fringilla rhoncus. Praesent volutpat felis vitae felis ultricies rhoncus. Nulla maximus nibh vel enim ullamcorper aliquam. Nam efficitur est nibh, id mollis nisl ullamcorper et.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Alternative Ireland Mergers Statements Practice", 
 
    "ShortDescription": "Aenean iaculis vehicula sollicitudin. Sed convallis, massa sit amet venenatis volutpat, arcu dolor volutpat neque, in lobortis arcu velit hendrerit ante. Quisque accumsan luctus enim eu aliquam. Quisque et dolor est.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Security Leadership Social", 
 
    "ShortDescription": "Vivamus pellentesque semper arcu eu egestas. Fusce lacinia velit quam, a rhoncus turpis blandit sit amet. Vivamus eros mi, malesuada vitae facilisis at, tincidunt in urna. Morbi sodales at nulla ac commodo.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Results regulation Financial Governance and Within", 
 
    "ShortDescription": "In enim nunc, tempor a congue ut, interdum consequat tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla luctus sodales nulla, at eleifend nibh fermentum eget.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "UK Leadership Professional Instruments to", 
 
    "ShortDescription": "Ut a congue quam, eu hendrerit dolor. Ut porta in nunc id porttitor. Pellentesque iaculis pretium vulputate. Aenean eu neque vestibulum, semper leo sed, porttitor sapien. Etiam in justo eu risus scelerisque ultricies. Nunc commodo est in scelerisque semper.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Workload Witness Data", 
 
    "ShortDescription": "Vestibulum maximus et arcu eget congue. Phasellus", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Business Savings Control", 
 
    "ShortDescription": "Etiam elementum auctor tellus.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Donor Business Professionalism Positioning", 
 
    "ShortDescription": "Phasellus ultrices tellus at gravida tempor. Mauris in augue dolor. Pellentesque sit amet mauris vehicula, eleifend tellus eget, cursus lectus. Suspendisse sed convallis ex, non tristique tellus.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Performance Work Preventing Workload Mergers Data Strategy", 
 
    "ShortDescription": "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut ipsum ac sapien mollis ultrices vehicula magna sed augue feugiat, eget interdum dui feugiat. Integer erat augue, lacinia vel ex a, consectetur lacinia nulla.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Enterprise Compliance Introduction and", 
 
    "ShortDescription": "Nullam cursus, leo in cursus feugiat, leo urna mollis dui, eu pretium augue orci ut lorem.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Performance Combinations Continuous BPM Data Corporate", 
 
    "ShortDescription": "Donec ornare nisi nec viverra lacinia. Ut in pharetra est. Suspendisse vestibulum, nisi eget bibendum porta, urna erat fermentum mi, ac efficitur turpis nisi ut lacus.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "and Building Spreadsheet International", 
 
    "ShortDescription": "Phasellus odio arcu, lobortis vel dui et, tincidunt tristique mi. Aenean et malesuada nibh.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Partnership Acquisitions Finance Teams for Gift Strategy", 
 
    "ShortDescription": "Donec et arcu a augue sollicitudin congue. Ut suscipit, dui at ultrices convallis, purus mauris dignissim lacus, a dignissim dui justo eu turpis. Proin eget orci porttitor, convallis nibh sit amet, posuere lacus. Nunc vestibulum at ante sit amet dignissim. Curabitur quis quam tortor.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "for The Briefing Financial UK in", 
 
    "ShortDescription": "Donec volutpat justo maximus lorem volutpat, eget aliquam dolor cursus. Maecenas porta fermentum rhoncus. Aliquam porttitor enim iaculis congue dignissim. Aenean at ante a nisl mattis efficitur. Morbi vulputate a lorem nec condimentum.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Ideas Management Mapping Using Skills and", 
 
    "ShortDescription": "Aliquam sollicitudin, nunc vitae laoreet mattis, justo ante congue tortor, nec tempus tellus metus consequat enim. Ut eget urna euismod, luctus augue laoreet, rutrum dui. Vivamus egestas eleifend arcu facilisis gravida.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Career Negotiating Managing Buying change? your Tax", 
 
    "ShortDescription": "Donec purus odio, bibendum in rutrum sit amet, tincidunt a justo. Curabitur quis blandit elit. Cras blandit felis scelerisque luctus vulputate. Etiam purus mauris, mattis bibendum metus a, vehicula consequat enim.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Mergers and Assessing Accountants and Ethical the", 
 
    "ShortDescription": "Donec vel neque consequat, tincidunt risus quis, sodales erat. Donec imperdiet urna in sollicitudin auctor. Donec tristique dolor vel elit pulvinar imperdiet. Nulla id nisi feugiat, tempus neque quis, dignissim augue.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Solving Mergers Business", 
 
    "ShortDescription": "Donec maximus suscipit tellus. Sed dolor metus, lobortis in ultricies eget, tincidunt in erat. Curabitur faucibus hendrerit ex in eleifend. Maecenas ligula mauris, bibendum vitae nisl eget, mattis consequat mi.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Promoting for Basics Accounting", 
 
    "ShortDescription": "Morbi sit amet diam a dui molestie venenatis ac vitae tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Building UK GAAP World", 
 
    "ShortDescription": "Nunc consequat dictum rutrum.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Principles New Professional Accountants", 
 
    "ShortDescription": "Mauris luctus neque sit amet odio posuere porta. Aliquam interdum augue dui, at lobortis eros ultrices id. Donec mattis posuere dui vitae sagittis. Sed tempor aliquam nisi, vel semper odio.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Transformation Charity Solving The Dynamic Guide", 
 
    "ShortDescription": "Duis leo lectus, lacinia sodales semper eget, convallis ut nibh. In blandit orci lectus, at imperdiet urna posuere nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel urna quis est varius auctor.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Megatrends and Advantage", 
 
    "ShortDescription": "Morbi consequat eu magna quis bibendum.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "The Law Protection Control", 
 
    "ShortDescription": "Proin lobortis, ante ut vestibulum posuere, tortor mauris iaculis nulla, ac commodo odio quam eu arcu. Suspendisse at fringilla purus, vitae pharetra ante. Suspendisse mattis rhoncus gravida. Etiam tincidunt elementum condimentum. Vivamus id sagittis erat, tincidunt tristique elit.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Corporate Ethical", 
 
    "ShortDescription": "Vivamus et vulputate ipsum, id vulputate nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lacus risus, egestas nec magna ornare, aliquam luctus nibh. Morbi vel ullamcorper ex.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Succession IFRS IFRS Cyber for Integrated and", 
 
    "ShortDescription": "Mauris molestie nunc ut efficitur tincidunt. Quisque consectetur tincidunt lorem, sit amet semper purus pellentesque non. Pellentesque et volutpat sapien.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "for Reacting Understanding SME Results The", 
 
    "ShortDescription": "Praesent ac sagittis purus. Etiam lacinia massa sed felis pulvinar, vitae consectetur tellus iaculis. Nullam quis vulputate turpis.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Development with Accounting Issues and", 
 
    "ShortDescription": "Maecenas non pellentesque neque. Donec maximus bibendum lectus vel eleifend. Nullam fringilla vitae ex vel eleifend. Nunc aliquet tempus sapien vitae consequat. Donec pretium ipsum ut nunc ornare, a tincidunt odio bibendum.", 
 
    "ImageLink": "image1.jpg" 
 
    }, 
 
    { 
 
    "Title": "Tips Financial Planning", 
 
    "ShortDescription": "Proin congue semper fringilla. Cras risus ipsum, scelerisque sit amet nunc in, aliquam volutpat neque. Maecenas imperdiet nunc sed libero congue, non fringilla sapien ultricies.", 
 
    "ImageLink": "image1.jpg" 
 
    } 
 
]; 
 

 
$(document).ready(function() { 
 
    var j = 0; 
 
    $('.button').click(function() { 
 
    for (var i = 0; i < 5 && j < courses.length; i++, j++) { 
 
     var obj = courses[j]; 
 
     $("#demo").append("<h2>" + (j + 1) + " " + obj.Title + "</h2><p>" + obj.ShortDescription + "</p>"); 
 
    } 
 
    // trigger first set 
 
    }).click(); 
 
});
.button { 
 
    background-color: blue; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
    border-radius: 5px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p id="demo"></p> 
 
<a href="#!" class="button">Link Button</a>

0

您可以使用slice()和跟蹤的起始索引:

//create demo data array 
 
var courses = getDemoData(), 
 
    startIdx = 0, 
 
    numItems = 5, 
 
    $cont = $('#content'); 
 

 
function loadItems() { 
 
    courses.slice(startIdx, startIdx + numItems).forEach(item => { 
 
    $cont.append($('<li>', { text: item.title })); 
 
    }); 
 
    startIdx += numItems; 
 
    // optional - hide button when none left 
 
    if (startIdx >= courses.length) { 
 
    $(this).hide(); 
 
    } 
 
} 
 
$('button').click(loadItems).click(); 
 

 
// helper for demo only 
 
function getDemoData() { 
 
    return new Array(18).fill().map((el, i) => { 
 
    return { 
 
     title: 'Item #' + (i + 1) 
 
    } 
 
    }); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Load More</button> 
 
<ul id="content"></ul>

相關問題