Data binding 淘汰js：向每个第n项添加类

有没有简单的方法来做类似jquery的事情

$('#image-gallery li:nth-child(3)').addClass('third-image-child')

但在淘汰赛的背景下，我对淘汰赛完全陌生，但似乎找不到一个简单的方法来做一些事情，似乎它应该如此简单？我认为这可能与在observable数组中查找第三项和添加类有关，但不确定语法。救命啊

下面是我的模型，它是一个简单的分页模型，加载9个项目，然后有下一个和上一个按钮。现在，我添加了一个简单的函数来生成100个条目，只是为了测试它

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);
                  });

members.DisplayGallery=函数（jsondata）{
var viewModel={
字段：ko.observableArray（jsondata），
页面大小：可观察（9），
pageIndex:ko.可观察（0），
上一页：函数（）{
this.pageIndex（this.pageIndex（）-1）；
},
下一页：函数（）{
this.pageIndex（this.pageIndex（）+1）；
}
};
viewModel.maxPageIndex=ko.DependentToServable（函数（）{
返回Math.ceil（this.fields（）.length/this.pageSize（））-1；
}，视图模型）；
viewModel.pagedImages=ko.DependentToServable（函数（）{
var size=this.pageSize（）；
var start=this.pageIndex（）*大小；
返回此.fields.slice（开始，开始+大小）；
}，视图模型）；
ko.applyBindings（viewModel，$（“#图像库”）[0]）；
};
$（函数（）{
var数据=[]；
对于（变量i=0；i<100；i++）{
数据推送({
图像链接：“http://sample-image.jpg",  
imagePageLink:“http://”，
imageTitle:“此处标题”+i，
userFullName:“Name”+i，
imageDate:“描述”+i
})
}
成员。显示库（数据）；
});

标记：

<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>   

用户名

图像日期

如果使用绑定到，则可以使用

$index

上下文属性设置每3个元素的类，如下所示：

<li data-bind="css: { 'third-image-child': $index() % 3 == 0 }">
    ...
</li>

...

@Jeff Mercado-正确。在我的第一个例子中没有提到这一点。现在修好了。@Amy-是的。它应该在KO工作的地方工作（即6+）。你可以看到它在这里工作：太棒了，谢谢。比我能找到的很多东西都简单：D