Jquery 将类添加到<；李>；基于容器div宽度的元素

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

下面是我使用的jQuery：

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

这一个使得每行有3个LI元素

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

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

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

如果是960像素宽，则在第五个Li子级中添加“last” 如果是520像素宽，则在第三个LI子级中添加“最后一个”

我希望这一切都有意义。如果你需要更详细的信息，请告诉我。我愿意根据窗口大小向container div添加不同的类名

提前谢谢

编辑：

抱歉，在回答一个问题时，html设置如下：

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

$('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);

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

...






...

---

包装器是获取附加大小的容器元素。

我不知道哪个对象是您的大小容器，我也不确定我是否完全理解您想要的逻辑，但假设容器是

网格列表

，您可以这样构建一些逻辑，然后将其合并到以编程方式构建的选择器字符串中：

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;
}

然后，构建如下选择器：

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

$('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);

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

我不确定您的宽度逻辑到底是什么，但很明显，您可以根据确切的宽度触发点和num列调整此代码

或者，如果一个算法根据适合的数量工作，您可以将其简化为如下计算：

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

$('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);

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

要使此代码响应窗口大小调整事件，请执行以下操作：

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

$('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);

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

如果响应有点滞后，有时最好在调整大小事件上使用一个短计时器，如下所示：

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

$('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);

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

---

这将仅在调整大小事件停止1/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');
     }
});

---

与其使用javascript，不如使用

first child

CSS选择器，该选择器具有，然后只应用

margin left

而不是

margin right

，

我认为你的比较有点不对劲，不是吗？@你-我真的不明白他们想要的规则是什么，但我认为，一旦他们看到如何以编程方式从逻辑构建选择器字符串，他们就可以轻松地调整逻辑以适应它。@jfriend00您的第一个建议是可行的，但现在还有另一个问题。有没有办法让它在调整大小时自动切换？现在你必须刷新浏览器，这将正常工作，除非此人使用的移动设备可以在纵向和横向之间切换。Thanks@jkilp-您必须钩住窗口大小调整事件，并在大小更改时运行一些附加代码来重置它。这将涉及删除所有现有的

.last

类，然后在每个调整大小事件上再次运行代码。有关更多信息，请参阅。@jfriend00-非常好！我对它做了一点调整，因为当我调整大小时它会工作，但是如果我加载一个页面宽度到某个宽度，它不会添加“最后一个”。它会等到我实际手动调整浏览器大小时才开始工作。然而，我现在已经开始工作了！谢谢