Question

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

带有“book”类的前三个div应该有类 “fourcol”，其余应该有“threecol”类。
“threecol”的每4个实例都应该有“last”类

我想知道是否有办法定位“book”类的前3个实例，我尝试使用http://api.jquery.com/eq-selector/

<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

FIDDLE

Answer 2

我建议在这里使用slice，因为它在lt（）的手册页上说：

因为：lt（）是一个jQuery扩展而不是CSS的一部分规范，查询使用：lt（）无法利用本机DOM querySelectorAll（）提供的性能提升方法。要在现代浏览器中获得更好的性能，请使 $（“your-pure-css-selector”）。切片（0，索引）代替。

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: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');

Answer 4

$(".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

我不知道我是否正确地理解了这一部分，但对于“第四部分”你可以做到：

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

或者您可以尝试使用nth-child，例如：

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

定位div的范围

4 个答案: