Knockout js: Add Class to each nth item - data-binding

Question

Is there any simple way to do something like jquery i.e.
$('#image-gallery li:nth-child(3)').addClass('third-image-child')
but in the context of knockout, I am completely new to knockout but can't seem to find a simple way of doing something which seems like it should be so simple? I thought it might be something to do with finding the 3rd item in the observable array and adding the class but am not sure of the syntax. Help??!
My model is below, it is a simple pagination model, that loads 9 items, and then has next and previous buttons. For now I have added a simple function to generate 100 items just to test it out.
members.DisplayGallery = function(jsondata) {
var viewModel = {
fields: ko.observableArray(jsondata),
pageSize: ko.observable(9),
pageIndex: ko.observable(0),
previousPage: function() {
this.pageIndex(this.pageIndex() - 1);
},
nextPage: function() {
this.pageIndex(this.pageIndex() + 1);
}
};
viewModel.maxPageIndex = ko.dependentObservable(function() {
return Math.ceil(this.fields().length / this.pageSize()) - 1;
}, viewModel);
viewModel.pagedImages = ko.dependentObservable(function() {
var size = this.pageSize();
var start = this.pageIndex() * size;
return this.fields.slice(start, start + size);
}, viewModel);
ko.applyBindings(viewModel, $('#image-gallery')[0]);
};
$(function() {
var data = [];
for (var i = 0; i < 100; i++) {
data.push({
imageLink: "http://sample-image.jpg",
imagePageLink: "http://",
imageTitle: "Title here" + i,
userFullName: "Name" + i,
imageDate: "Description" + i
})
}
members.DisplayGallery(data);
});
Markup:
<ul data-bind="foreach: pagedImages" id="image-gallery">
<li>
<div class="image-thumb" data-bind="style: { backgroundImage: 'url(' + imageLink +')'}">
<a class="image-thumb-link" data-bind="attr: { href: imagePageLink}" href="gallery-single.html"></a>
</div>
<div class="image-text">
<a data-bind="attr: { href: imagePageLink}" href="gallery-single.html"><span class="image-title" data-bind="text: imageTitle"></span></a><br />
<span data-bind="text: userFullName">Username</span><br />
<span data-bind="text: imageDate">Image Date</span>
</div>
</li>
</ul>

Answer 1

If you bind to your observable array using the foreach binding, you can use the $index context property to set the class of every 3rd element, like so:
<li data-bind="css: { 'third-image-child': $index() % 3 == 0 }">
...
</li>