有没有简单的方法来做像jquery这样的事情。
$('#image-gallery li:nth-child(3)').addClass('third-image-child')
但是在淘汰的背景下,我对淘汰赛来说是全新的,但似乎无法找到一种简单的方法来做一些似乎应该如此简单的事情?我认为这可能与查找可观察数组中的第3项并添加类但不确定语法有关。帮助??!
我的模型如下,它是一个简单的分页模型,可以加载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);
});
标记:
<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>
答案 0 :(得分:8)
如果使用observable array绑定到foreach binding,则可以使用$index
context属性设置每个第3个元素的类,如下所示:
<li data-bind="css: { 'third-image-child': $index() % 3 == 0 }">
...
</li>