Javascript / JQuery Maths Logic

Question

Я написал скрипт для функциональности сетки flexbox, однако у меня возникли некоторые проблемы с математическими вычислениями, чтобы выяснить, сколько элементов находится в последней строке, так как я хочу применить к ним класс для исправления стиля flexbox.в случае, если это не полная строка.

Моя ситуация:

У меня есть 4 макета: 1 столбец, 2 столбца, 3 столбца и 4 столбца.

В разных случаяхУ меня была бы следующая ситуация:

1. Для макета с 4 столбцами в нижнем ряду может оставаться 3.
2. Для макета с 4 столбцами в нижнем ряду могут оставаться 2.
3. Для макета с 4 столбцами в нижнем ряду может оставаться 1.
4. Для макета с 3 столбцами в нижнем ряду может оставаться 2.
5. Для макета с 3 столбцамив нижнем ряду может остаться 1.
6. Для макета с двумя столбцами в нижнем ряду может остаться 1.

В каждом из этих обстоятельств мне нужно добавить разные классык пунктам реОсновываясь на нижнем ряду, эти классы:

1. flex-last (для последнего / единственного элемента, оставленного в строке)
2. flex-second-last (для 2-го допоследний элемент в строке)
3. flex-third-last (для 3-го до последнего элемента в строке)

Эти классы должны применяться, только если строка не заполнена, напримересли в нижнем ряду 4 элемента 4 столбца, ничего не следует применять, так как не требуется никаких стилевых исправлений.

Мой текущий код работал нормально, однако я столкнулся с экземпляром, в котором у меня есть 43 элемента вСетка и математика, кажется, имеют проблемы.

Поскольку размер экрана уменьшается, он корректирует компоновку, чтобы она становилась все меньше и меньше до столбца 1, это означает, что вычисления должны работать во всех случаях.

Ниже приведен мой код:

jQuery(document).ready(function($) {
    $(".flex-container").each(function() {
        var flexColumns = $(this).attr("rel");
        var self = $(this);

        function flexboxFixes(){
            if(self.find(".flex-item").hasClass("flex-cols-3")) {
                var flexItemCount = self.find('.flex-cols-3').length;
                if ((flexItemCount - 1) % 3 === 0) {
                    self.find(".flex-cols-3:last-of-type").addClass("flex-last");
                } else if ((flexItemCount - 1) % 3 !== 0 && flexItemCount % 3 !== 0 ) {
                    self.find(".flex-cols-3:last-of-type").addClass("flex-last");
                    self.find(".flex-cols-3:nth-last-of-type(2)").addClass("flex-second-last");
                }   
            } else if(self.find(".flex-item").hasClass("flex-cols-4")) {
                var flexItemCount = self.find('.flex-cols-4').length;
                if ((flexItemCount - 1) % 4 === 0) {
                    self.find(".flex-cols-4:last-of-type").addClass("flex-last");
                } else if ((flexItemCount - 2) % 4 === 0) {
                    self.find(".flex-cols-4:last-of-type").addClass("flex-last");
                    self.find(".flex-cols-4:nth-last-of-type(2)").addClass("flex-second-last");
                } else if ((flexItemCount - 2) % 4 !== 0 && flexItemCount % 4 !== 0) {
                    self.find(".flex-cols-4:last-of-type").addClass("flex-last");
                    self.find(".flex-cols-4:nth-last-of-type(2)").addClass("flex-second-last");
                    self.find(".flex-cols-4:nth-last-of-type(3)").addClass("flex-third-last");
                }   
            } else if(self.find(".flex-item").hasClass("flex-cols-2")) {
                var flexItemCount = self.find('.flex-cols-2').length;
                if ((flexItemCount - 1) % 2 === 0) { //Is there 1 extra?
                    self.find(".flex-cols-2:last-of-type").addClass("flex-last");
                }
            }
        }
        flexboxFixes();

        $(window).bind('resize',function(){flexboxFixes();});
    });
});

Примечания, на которые стоит обратить внимание:

Это может помочь вам понять, как мы можем выполнять математику без конфликтов?

1. X / 1 Всегда равно целому числу
2. X / 2 Alпутей равно целому числу или .5
3. X / 3 всегда равно целому числу или .33 или .66

4. X / 4 всегда равно целому числу или .25 или .5 или.75

5. Целое число никогда Десятичное = полная строка

6. 2 столбца, .5 = 1 осталось
7. 3 столбца, .33 =1 осталось, 0,66 = 2 осталось
8. 4 столбца, 0,25 = 1 осталось, 0,5 = 2 осталось, 0,75 = 3 осталось

Ядумая что-то вроде первой проверки макета, а затем проверки десятичных значений, чтобы увидеть, сколько осталось элементов, поскольку это будет одинаковым для всех чисел?

var flexItemCount = self.find('.flex-cols-4').length;
var flexItemMath = flexItemCount / 4;
alert(flexItemMath % 1);

if (flexItemMath % columnCount) == 0.X

это будет казаться осуществимым?

Answer 1

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

if(self.find(".flex-item").hasClass("flex-cols-3")) {
    var flexItemCount = self.find('.flex-cols-3').length;
    var flexItemMath = flexItemCount / 3; //NEW
    flexItemMath = flexItemMath % 1; //NEW

    var flexItemRound = Number(flexItemMath).toFixed(2); //NEW

    if (flexItemRound == 0.00) { //NEW

    } else if (flexItemRound == 0.33) { //NEW
        self.find(".flex-cols-3:last-of-type").addClass("flex-last");//1 remainder 0.33
    } else if (flexItemRound == 0.66) { //NEW
        self.find(".flex-cols-3:last-of-type").addClass("flex-last");
        self.find(".flex-cols-3:nth-last-of-type(2)").addClass("flex-second-last"); //2 remainder 0.66
    }   
}