Как откорректировать скрипт?

Question

[sergey]

Скрипт ищет в массиве у его потомком события even-item, если их большего одного то присваивает им класс overlap. Дальше (на примере 2 события найдены, но события добавляются динамически и их может быть и 10) цикл выводит динамические значения left и right. Проблема как корректно эти значения передать каждому из 2 событий (для первого left:0%, right: 50%, для второго left: 50%, right: 0%)

$('.week-view .hour-grid .days .day').each(function () {
        const cell = $(this).find('.cell');
        
        for (let i = 0; i < cell.length; i++) {
            const eventsList = cell[i];
            const events = eventsList.children.length; // 2

            for (const event of eventsList.children) {
                event.classList.add('overlap');
            }
            
            if (events > 1) {
                for (let y = 0; y < events; y++) {
                    let left = 100 / events * y + '%';
                    let right = 100 - 100 / events * (y + 1) + '%';

                    console.log(left); //0%   // 50%
                    console.log(right); //50%  // 0%

                    $('.event-item.overlap').css({
                        'left': left,
                        'right': right
                    });
                }
            }
        }
    })

Answer 1

[sergey]

$('.week-view .hour-grid .days .day').each(function () {
        const cell = $(this).find('.cell');
        
        for (let i = 0; i < cell.length; i++) {
            const eventsList = cell[i];
            const events = eventsList.children.length; // 2

            for (const event of eventsList.children) {
                event.classList.add('overlap');
            }
            
            if (events > 1) {
                for (let y = 0; y < events; y++) {
                    let left = 100 / events * y + '%';
                    let right = 100 - 100 / events * (y + 1) + '%';

                    console.log(left); //0%   // 50%
                    console.log(right); //50%  // 0%

                    $('.event-item.overlap').eq(y).css({
                        'left': left,
                        'right': right
                    });
                }
            }
        }
    })

Answer 2

[Дима Долготер]

$('.event-item.overlap:eq(0)').css({
                
                        'right': right
                    });
$('.event-item.overlap:eq(1)').css({
                        'left': left,
                       
                    });

может поможет) но ты что-то делаешь не так, слишком замудренно. можно чекнуть сайт?

Comments

[sergey]

так у каждого события есть left и right, а кроме того событий может быть и 10 и писать тогда :eq(10) не вариант:(

[sergey]

это локалка:)

[Дима Долготер]

Sagan, а зачем каждому событию left и right? ты по ширине их ровняешь?

[sergey]

могу https://jsfiddle.net/sergsagan/Lurydtaf/ дать

[sergey]

Дима Долготер, нет там ширины нету (только left и right) оно работает - надо только корректно значения задать

[Дима Долготер]

Sagan, так если из будет не один, а например 4 то делай через odd и и even

[sergey]

а если 3? 7 к примеру? там все динамически:это календарь и юзеры event-ов могут накидать сколько угодно (логика вывода events написана на ruby ralls а на jquery нужно только откорректировать left и right (перезаписать)

[Дима Долготер]

Sagan, даже если 3 и 7 почитай про odd и и even

[sergey]

Дима Долготер, да я знаю про них:))) я 7 лет сайты верстаю а вот логику пишу недавно:)