0

好的，我在 jQuery 中动态创建了一个 div 来显示一些博文。

<div class="blog-items">
    <div class="blog-item"></div>
</div>

下面的 jQuery 添加了一个 nomargin 类来移除最后一个块的边距。如何重置循环，使其在新行上重新开始。目前 nomargin 类应用于剩余的块。

这是jQuery摘录

var blogItemLength = $('.blog-item').length;
if(blogItemLength > 2) {
    $('.blog-item:gt(1)').removeClass("blog-item").addClass("blog-item_nomargin");
}

希望这是有道理的，在此先感谢。

4

4 回答 4

0

我无法回答 jquery 问题，因为我没有准确理解您想要实现的目标。

但是你考虑过使用 CSS 选择器吗？如果您想为最后一个 .blog-item 设置不同的样式，可以使用：

.blog-item:last-child {
    color: red; /* or whatever */
}

对于其他更复杂的场景，有 :nth-last-child()

于 2013-07-10T23:16:20.213 回答
0

我建议，根据我对您的问题的了解：

$('.blog-item').filter(function(i){
    return (i + 1)%3 === 0;
}).removeClass('blog-item').addClass('blog-item_nomargin');

这需要所有.blog-item元素，过滤它们以仅保留第三、第六、第九...元素，删除blog-item类名并添加blog-item_nomargin类名。

参考：

于 2013-07-10T23:26:29.280 回答
0

使用选择器比（大于）选择last()器更清晰：gt()

$('.blog-item').last().removeClass("blog-item").addClass("blog-item_nomargin");

但是如果你必须使用gt()：

$('.blog-item:gt(-2)').removeClass("blog-item").addClass("blog-item_nomargin");

请注意，如果您的页面中有多个 div.blog-items 元素，您可能需要执行以下操作：

$('.blog-items').each(function(index){
    $(this).children('.blog-item').last().removeClass("blog-item").addClass("blog-item_nomargin");
});

参考

http://api.jquery.com/last/
http://api.jquery.com/gt-selector/

于 2013-07-10T23:26:33.917 回答
0

根据我对您的问题的理解，我尝试了这个：

var blogItemLength = $('.blog-item').length;
 $('.blog-items').each(function () {
  if(blogItemLength > 2) {
   $(this).find('.blog-item').last().removeClass("blog-item").addClass("blog-item_nomargin");
 }    
});

http://jsfiddle.net/steo/BEmjA/ （我只是使用了一些示例类。）

我编写的代码更改了class每组的第三项blog-items

希望这是有道理的。

于 2013-07-10T23:30:43.867 回答