Добавить класс к элементу <li>на основе ширины контейнера

Question

У меня есть плавающий список изображений, каждое с правым полем 10 пикселей. Я использую jquery, чтобы дать последнему элементу LI класс «last», который удаляет правое поле.

Вот jQuery, который я использую:

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

Таким образом, это делает так, чтобы в каждой строке было 3 элемента LI.

Что мне нужно сделать, так это иметь «последний» класс, который нужно присоединить к другому элементу LI в зависимости от размера контейнера div.

Я использую медиазапросы, чтобы увеличить ширину контейнера, и он разбит на 4: Мобильный (2 литра на ряд), Facebook iFrame 520px (3 литра в строке), iPad Portrait (4 литра в строке), 960 пикселей (5 лир на ряд)

Так что, в основном, нужно что-то вроде этого ...

Если ширина 960px, добавьте «последний» к 5-му Ли ребенка Если ширина 520 пикселей, добавьте «последний» к 3-му дочернему элементу LI

Я надеюсь, что все имеет смысл. Дайте мне знать, если вам нужна более подробная информация. Я открыт для добавления другого имени класса в контейнер контейнера в зависимости от размера окна.

Заранее спасибо!

EDIT:

Извините, в ответ на один вопрос, 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);

Если скорость отклика немного запаздывает, иногда полезно использовать короткий таймер для события изменения размера, например:

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

Ретрансляция будет выполняться только после того, как событие изменения размера остановится на 1/2 секунды, вместо того, чтобы пытаться активировать его во время изменения размера.

Answer 2

Вместо того, чтобы вообще использовать javascript, лучше использовать CSS-селектор first-child с полной совместимостью с браузером IE7 + , а затем просто применить margin-left вместо margin-right.

Answer 3

Альтернативный подход заключается в добавлении класса только тем, кто имеет то же смещение, что и последний элемент. Другими словами, что-то вроде ...

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