CODEWITHSUNDEEP
javascriptjquery
DWLynch
DWLynch

Reputation: 61

How to load first items in list in one place, load other items somewhere else

I have a document where I'm loading the first five items from an external list into the div #reports.

 <div id="reports"></div>
 <div id="more-reports"></div>

    $("#reports").load("website.com/reports-list.html .report-item:lt(5)");

How do I load either the next (x) number items in that list or, alternatively, the rest of the items in that into the div #more-reports?

Upvotes: 0

Views: 58

Answers (1)

Lajos Arpad
Lajos Arpad

Reputation: 76464

Just use lt, see:

let template = "";
for (let i = 0; i < 100; i++) {
  template += `<span class="report-item">${i}&nbsp;</span>`;
}
document.getElementById("input").innerHTML = template;

function loadMore() {
  $("#output").append($("#input span.report-item:lt(10)"));
}
//$("#reports").load("website.com/reports-list.html .report-item:lt(5)");
#input span {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<div id="output"></div>
<input type="button" value="Load More" onclick="loadMore()">
<div id="input"></div>

Upvotes: 2

Related Questions