Find child div by index
Iterate through a set of divs within a parent div and show only those divs within a certain range as determined by a for loop
by eventide
HTML
<div id="movieListTable" style="display: table;">
<div class="movieRow alt">
<div class="movieCell">
<div class="vitalsTable">
<div class="vitalsRow">
<div class="titleCell">
<input type="checkbox" class="chkDeleteMovie" name="deleteMovies[]" value="35"
title="Check this movie for deletion">
<label class="lblDeleteMovies" title="Check this movie for deletion">Delete</label>
<br>
<label class="lblTitle">Batman: The Dark Knight</label>
</div>
<div class="directorCell">Directed by
<label class="lblDirector">Christopher York</label>
</div>
<div class="lengthCell">
<label class="lblLength">129</label>mins</div>
<div class="genresCell">
<label class="lblGenre1">Action</label>
<br>
<label class="lblGenre2"></label>
<br>
</div>
<div class="mpaaRatingCell">
<label class="lblMpaaRating">PG-13</label>
</div>
<div class="statusCell">
<label class="lblStatus">Own it</label>
</div>
</div>
</div>
<div class="detailsTable" style="display: none;">
<div class="detailsRow">
<div class="editCell">
<button class="button btnEditMovie" value="Edit This Movie" name="35"
title="Click to edit this movie">Edit This Movie</button>
</div>
<div class="actorsCell">Starring
<br>
<label class="lblActors">Christian Bale,...CSS
/* Movies table styling */
#movieListTable {
font-size: 10px;
}
#movieListTable, .vitalsTable, .detailsTable, #addActorsTable {
display: table;
width: 100%;
line-height: 1.5em;
}
.vitalsTable {
margin-top: 10px;
}
.detailsTable {
margin-top: 3px;
}
.movieRow, .vitalsRow, .detailsRow, #addActor1-2row, #addActor3-4row, #addActor5-6row {
display: table-row;
}
#addActor1-2row, #addActor3-4row, #addActor5-6row {
text-align: center;
height: 48px;
}
.titleCell, .directorCell, .lengthCell, .genresCell, .yearCell, .statusCell, .editCell, .actorsCell, .formatCell, .synopsisCell, .mpaaRatingCell, .myRatingCell, #addActor1Cell, #addActor2Cell, #addActor3Cell, #addActor4Cell, #addActor5Cell, #addActor6Cell {
display: table-cell;
vertical-align: bottom;
padding: 5px;
}
#addActor1Cell, #addActor2Cell, #addActor3Cell, #addActor4Cell, #addActor5Cell, #addActor6Cell {
vertical-align: middle;
}
#addActor1Cell {
width: 309px;
}
.showActorList {
display: block;
float: left;
font-size: smaller;
line-height: .9;
}
.showActorList:hover {
text-decoration: underline;
cursor: pointer;
}
.titleCell {
width: 330px;
font-size: 120%;
}
.directorCell {
width: 225px;
}
.lengthCell {
width: 65px;
}
.genresCell {
width: 130px;
}
.mpaaRatingCell {
width: 60px;
}
.statusCell {
width: 130px;
}
.editCell {
width: 60px;
}
.actorsCell {
width: 245px;
}
.synopsisCell {
width: 400px;
}
.formatCell {
width: 95px;
}
.yearCell {
width: 35px;
}
.myRatingCell {
width: 105px;
}
.titleCell, .directorCell, .lengthCell, .genresCell, .mpaaRatingCell, .statusCell, #addActor1Cell, #addActor2Cell, #addActor3Cell, #addActor4Cell, #addActor5Cell, #addActor6Cell {
border-bottom: 1px solid #B9B9B9;
}
.editCell, .actorsCell, .synopsisCell, .formatCell, .yearCell, .myRatingCell {
border-bottom: 1px solid...JavaScript
$('#movieListTable').children().fadeOut(200);
var targetPage = 2,
numRecords = $('#movieListTable').children().length,
pageSize = 2, // Just 2 to test pagination and until more movies get entered
numPages = Math.ceil(numRecords / pageSize),
startRecord = ((targetPage - 1) * pageSize);
console.log('numRecords: ' + numRecords + ', numPages: ' + numPages);
console.log('startRecord: ' + startRecord + ', pageSize: ' + pageSize + ' records');
for (var i = startRecord; i <= startRecord + pageSize - 1; i++) {
console.log('i: ' + i);
$('div#movieListTable > div:eq(' + i + ')').fadeIn(200);
}