jquery - 定位 div 的范围

Question

我正在尝试在我的图书网站上执行以下操作：http: //seanbooks.tumblr.com

1. 具有“book”类的前三个 div 应该具有“fourcol”类，其余的应该具有“threecol”类。
2. “threecol”的每第四个实例都应该有“last”类

我想知道是否有一种方法可以使用我尝试使用http://api.jquery.com/eq-selector/来定位“书”类的前 3 个实例

<script>
    $(".book").slice(0, 3).addClass('fourcol').removeClass('threecol')
    .filter(':nth-child(3)').addClass('last').end()
    .filter(':nth-child(4n)').addClass('last');
</script>

感谢您的帮助！

Answer 1

您正在寻找的是lt()和gt()选择器

$('.book').filter(':lt(3)').addClass('threecol').end() //sets class to first three
          .filter(':gt(2)').addClass('fourcol').end() //sets class to the rest
          .filter(':nth-child(4n)').addClass('last'); //every fourth

小提琴

Answer 2

我建议在这里使用 slice，就像它在 lt() 的手册页上所说的那样：

因为 :lt() 是一个 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :lt() 的查询不能利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在现代浏览器中获得更好的性能，请改用 $("your-pure-css-selector").slice(0, index) 。

http://api.jquery.com/slice/

例如：

$(".book").slice(0, 3).addClass('fourcol').removeClass('threecol');

这是使用 JQuery nth 选择器选择每 4 个实例的示例：

$(".threecol .book:nth-child(4n)").addClass('last');

Answer 3

$(".book").addClass('threecol') //add a class of threecol to each element
          .slice(0, 3).addClass('fourcol').removeClass('threecol'); //add fourcol only to the first three elements

我不知道我是否正确理解了这部分，但对于“第 4 次实例”，您可以这样做：

var count = 0
$(".threecol").each(function() {
    count++;
    if(count === 4) {
        this.className += " last";
        count = 0;
    }
});

或者你可以尝试使用nth-child像：

$(".threecol:nth-child(4n)").addClass("last")

Answer 4

尝试

$(".book:lt(3)").addClass('fourcol').removeClass('threecol');

http://api.jquery.com/lt-selector/

要选择类“threecol”的每个第 4 个实例，您可以过滤掉那些不是第 4 个实例的元素。

$(".threecol").filter(function(i){
    return (i+1)%4 = 0;
}).addClass('last');