使用 jquery 作为 css nth child 的替代品

发布于 2024-08-29 19:03:14 字数 241 浏览 5 评论 0原文

我正在使用以下 css 创建具有棋盘背景的列表项（每个其他列表项都有灰色背景，它会移动每一行以创建棋盘图案：

li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) {
    background-color:grey;
}

有没有办法使用比 css3 更支持的 jquery 来做到这一点？谢谢

原文

I am using the following css to create list items with a chckerboard background ( every other list item has a grey background, which shift every row to create a checkerboard pattern:

li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) {
    background-color:grey;
}

Is there way I can do this using jquery that is more supportive than css3? Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

那些过往 2024-09-05 19:03:14

简短的回答：是的！

只需将它用作 document.ready 中的选择器，它就可以跨浏览器工作，如下所示：

$(function() {
  $("li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7)")
    .css('background-color','grey');
});

注意：这在存在的元素上运行当它运行时，如果您动态添加/删除元素，只需调用相同的选择器/.css()即可。不过，在这种情况下，我建议使用一个类，因此您可以使用 .addClass('myClass')< 来代替 .css('background-color','grey') /代码>

Short answer: yes!

Just use it as a selector inside a document.ready and it'll work cross-browser, like this:

$(function() {
  $("li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7)")
    .css('background-color','grey');
});

Note: this runs on the elements present when it's run, if you're dynamically adding/removing elements, just call the same selector/.css() then. I'd recommend a class in this case though, so instead of .css('background-color','grey'), you'd have .addClass('myClass')

回复收藏 0 原文

~没有更多了~