Question

我有一个浮动的图像列表，每个图像的右边距为10px。我正在使用jquery为最后一个LI元素提供一个“last”类，它会删除右边距。

这是我正在使用的jQuery：

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

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

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

我使用媒体查询来增加容器div宽度，它分为4：移动（每行2个LI）， Facebook iFrame 520px（每行3个LI）， iPad Portrait（每行4 LI）， 960px（每行5李）

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

如果是960px宽，则将“last”添加到第5个Li子如果是520px宽，则将“last”添加到3rd LI child

我希望一切都有道理。如果您需要更详细的信息，请告诉我。我愿意根据窗口大小为容器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');

我不确定你的宽度逻辑究竟是什么，但显然你可以将这段代码调整到你的确切宽度触发点和数列。

或者，如果算法根据适合的数量而工作，您可以将其减少为这样的计算：

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秒后才进行重新布局，而不是在调整大小期间尝试实现。

Answer 2

另一种方法是将类添加到与最后一项共享相同偏移量的那些类。换句话说，就像......

var lastTop = $('ul.grid_list li:eq(-1)').offset().top;
$('ul.grid_list li:eq(-5)').removeClass('last').each(function(index, item) {
     if ($(this).offset().top === lastTop) {
         $(this).addClass('last');
     }
});

Answer 3

最好不要使用javascript，最好使用first-child CSS选择器，其中full browser compatibility IE7+，然后只应用margin-left而不是margin-right。

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

3 个答案: