根据容器div宽度将类添加到<li>元素

Question

我有一个浮动的图像列表,每个图像的右边距为10px.我使用jquery给最后一个LI元素一个"last"类,它删除了右边距.

这是我正在使用的jQuery:

$('ul.grid_list li:nth-child(3n)').addClass('last');

所以这个使得每行有3个LI元素.

我需要做的是根据容器div的大小将"last"类附加到不同的LI元素.

我使用媒体查询来增加容器div宽度,它分为4:Mobile(每行2 LI),Facebook iFrame 520px(每行3 LI),iPad Portrait(每行4 LI),960px(每行5 LI) )

所以它基本上需要做的就是这样......

如果是960px宽,将"last"添加到第5个Li子如果是520px宽,则将"last"添加到第3个LI子

我希望一切都有道理.如果您需要更详细的信息,请告诉我.我愿意根据窗口大小为容器div添加不同的类名.

提前致谢!

编辑:

对不起,在回答一个问题时,html设置如下:

<div id="wrapper">
...
    <ul class="grid_list">
        <li></li>
        <li></li>
        <li class="last"></li>
        <li></li>
    </ul>
...
</div>

WRAPPER是容器元素,它可以获得附加的大小.

Answer 1

我不知道哪个对象是你的大小的容器,我不确定我是否完全理解你想要的逻辑,但假设容器是grid_list,你可以构建一些像这样的逻辑,然后将其合并到一个以编程方式构建选择器字符串

var numPerRow = 3;
var width = $(".grid_list").width();
if (width > 960) {
    numPerRow = 4;
} else if (width > 720) {
    numPerRow = 3;
} else if (width > 520) {
    numPerRow = 2;
} else {
    numPerRow = 1;
}

然后,像这样构建你的选择器:

$('ul.grid_list li:nth-child(' + numPerRow + 'n)').addClass('last');

我不确定你的宽度逻辑是什么,但显然你可以将这个代码调整到你的确切宽度触发点和num列.

或者,如果算法基于适合的数量而工作,则可以将其减少为如下计算:

var numPerRow = Math.floor($(".grid_list").width() / 250);
numPerRow = Math.min(numPerRow, 1);

要使此代码响应窗口大小调整事件,您可以执行以下操作:

function setupGrid() {
    $('ul.grid_list li').removeClass('last');
    var numPerRow = 3;
    var width = $(".grid_list").width();
    if (width > 960) {
        numPerRow = 4;
    } else if (width > 720) {
        numPerRow = 3;
    } else if (width > 520) {
        numPerRow = 2;
    } else {
        numPerRow = 1;
    }

    $('ul.grid_list li:nth-child(' + numPerRow + 'n)').addClass('last');
}

$(window).resize(setupGrid);

如果在响应性方面有点滞后,有时在resize事件上使用短计时器是很好的,如下所示:

var timer = null;
$(window).resize(function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(function() {
        timer = null;
        setupGrid();
    }, 500);
});

这只会在调整大小事件停止1/2秒后执行重新布局,而不是在调整大小期间尝试执行此操作.