Question

无法使其正常工作。

如果窗口是＆gt; 800应该有6个图像红色背景
如果窗口是＆lt; 800应该有4个图像蓝色背景

应该在调整大小和加载时工作。我错过了什么？

    var $container = $(container);

    $(window).on("resize", function () {
        $('.items > .item', $container).each(function (i) {

            if ($(window).width() > 800) {
                if (i % 6 == 0) {
                    $(this).nextAll().andSelf().slice(0, 6).wrapAll('<div class="wrap fadeIn"></div>');
                }
                $(".grid-container").removeClass('four');
                $(".grid-container").addClass('six');
            }

            if ($(window).width() < 800) {
                if (i % 4 == 0) {
                    $(this).nextAll().andSelf().slice(0, 4).wrapAll('<div class="wrap fadeIn"></div>');
                }
                $(".grid-container").removeClass('six');
                $(".grid-container").addClass('four');
            }
        })
    }).trigger('resize');

演示：http://jsfiddle.net/mE8br/

Answer 1

第一次，这匹配了许多项目：

$('.items > .item', $container)

但是，第一次运行会改变您的DOM，使其不再匹配任何内容。您将项目包装在div个元素中，以便.items不再有任何直接.item个孩子。

你的处理程序开火但是没有任何循环。

Answer 2

我添加了一个整体div，以便更容易定位项目

http://jsfiddle.net/Ejek6/4/

你有

'.items > .item'

我把它改成了

'.items .item'

由于您使用div包装项目＆gt;选择器不再起作用

如果您希望代码与您编写的代码相同，那么http://jsfiddle.net/Ejek6/5/ 我只更新了选择器

在这个版本中，我移动了窗口宽度的检查，因此效率更高

http://jsfiddle.net/Ejek6/6/

调整大小功能调整大小不需要时触发

2 个答案: