根据容器 div 宽度向 <li> 元素添加类答案

【问题标题】：Add class to <li> element based on container div width根据容器 div 宽度向 <li> 元素添加类
【发布时间】：2012-01-04 22:08:01
【问题描述】：

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

这是我正在使用的 jQuery：

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

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

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

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

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

如果是 960px 宽，则将“last”添加到第 5 个李孩子如果是 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 是获取附加到它的大小的容器元素。

【问题讨论】：

标签： jquery html css class width

【解决方案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);

如果响应速度有点慢，有时最好在调整大小事件上使用短计时器，如下所示：

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

这只会在调整大小事件停止 1/2 秒后进行重新布局，而不是在调整大小期间尝试实时进行。

【讨论】：

我觉得你的比较有点不对劲，不是吗？
@You - 我真的不明白他们到底想要规则是什么，但我认为一旦他们看到如何以编程方式从逻辑构建选择器字符串，他们就可以轻松调整逻辑以适应.
@jfriend00 您的第一个建议有效，但现在这是另一个问题。有没有办法让它在调整大小时自动切换？现在您必须刷新浏览器，这将正常工作，除非该人使用可以在纵向和横向之间切换的移动设备。谢谢
@jkilp - 您必须挂钩窗口调整大小事件并运行一些额外的代码以在大小更改时重置它。这将涉及删除所有现有的.last 类，然后在每个调整大小事件上再次运行您的代码。请参阅api.jquery.com/resize 了解更多信息。
@jfriend00 - 太棒了！我对其进行了一些调整，因为它在我调整大小时会起作用，但是如果我加载了一个特定宽度的页面宽度，它就不会添加“最后一个”。它会等到我真正手动调整浏览器的大小才能开始工作。但是，我现在开始工作了！谢谢！

【解决方案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');
     }
});

【讨论】：

【解决方案3】：

与其完全使用 javascript，不如使用first-child CSS 选择器，它具有full browser compatibility IE7+，然后只应用margin-left 而不是margin-right。

【讨论】：