Как оптимизировать данный код
 

Приветствую,
есть код который хочу оптимизировать, подскажите пожалуйста как лучше сделать, есть идея хранить $(item).next() $(item).prev() как переменные и использовать их. возможно ли сделать что то получше? интересует именно скорость работы, спасибо

MultiPicker.updateClasses = function (item, className) {
		if ($(item).hasClass(className)) {
			if ($(item).next().hasClass(className) && $(item).prev().hasClass(className)) {
				if ($(item).next().next().hasClass(className)) {
					$(item).next().removeClass();
					$(item).next().addClass(className + " center-side");
				} else {
					$(item).next().removeClass();
					$(item).next().addClass(className + " right-side");
				}
				if ($(item).prev().prev().hasClass(className)) {
					$(item).prev().removeClass();
					$(item).prev().addClass(className + " center-side");
				} else {
					$(item).prev().removeClass();
					$(item).prev().addClass(className + " left-side");
				}
				$(item).removeClass();
				$(item).addClass("active center-side");
			} else if ($(item).next().hasClass(className) && !$(item).prev().hasClass(className)) {
				if ($(item).next().next().hasClass(className)) {
					$(item).next().removeClass();
					$(item).next().addClass(className + " center-side");
				} else {
					$(item).next().removeClass();
					$(item).next().addClass(className + " right-side");
				}
				$(item).removeClass();
				$(item).addClass("active left-side");
			} else if (!$(item).next().hasClass(className) && $(item).prev().hasClass(className)) {
				if ($(item).prev().prev().hasClass(className)) {
					$(item).prev().removeClass();
					$(item).prev().addClass(className + " center-side");
				} else {
					$(item).prev().removeClass();
					$(item).prev().addClass(className + " left-side");
				}
				$(item).removeClass();
				$(item).addClass(className + " right-side");
			}
		} else {
			if ($(item).next().hasClass("right-side")) {
				$(item).next().removeClass();
				$(item).next().addClass(className);
			}
			if ($(item).prev().hasClass("left-side")) {
				$(item).prev().removeClass();
				$(item).prev().addClass(className);
			}
			if ($(item).prev().hasClass("center-side")) {
				$(item).prev().removeClass();
				$(item).prev().addClass(className + " right-side");
			}
			if ($(item).next().hasClass("center-side")) {
				$(item).next().removeClass();
				$(item).next().addClass(className + " left-side");
			}
		}

полный код здесь https://github.com/styopdev/multiPic...multipicker.js

как минимум можно писать так

$(item).next().removeClass().addClass(className + " left-side");

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

Spass,
Спасибо большое, если у кого еще есть идеи буду рад помощи

Spass,
Классы меняются приклике и hover-е, как тут http://styopdev.github.io/multiPicker/
То есть вы предлагаете всем элементам добавить класс к примеру .active а потом уже в css разбираться кто первый кто последний при помощи :first :last?

про переменные слышал? :)

Да, здесь не все так просто, подумаю над этим на досуге :)

nerv_,
Вопрос до конца слабо было прочитать?

Spass,
Спасибо :)

А что там читать? Твой код говорит за тебя :)

.checklist li.active:first-child,
.checklist li:not(.active) + li.active {
    border-bottom-right-radius: 0;
    border-right: 2px solid transparent;
    border-top-right-radius: 0;
}

вместо left-side :D

nerv_,
фейспалм.жпг

Spass,
Спасибо, обязательно попробую.

.checklist > li.active {
    border-top: 2px solid #0036ff;
    border-bottom: 2px solid #0036ff;
    border-radius: 0;
    color: #000;
}

.checklist li.active:first-child,
.checklist li:not(.active) + li.active {
    border-bottom-left-radius: 50px;
    border-left: 2px solid #0036ff;
    border-top-left-radius: 50px;
}

.checklist li.active:last-child,
.checklist li.right-side {
    border-bottom-right-radius: 50px;
    border-right: 2px solid #0036ff;
    border-top-right-radius: 50px;
}

$('.checklist li').on('click', function(){
                $(this).toggleClass('active');
                $('.checklist li').removeClass('right-side').filter('.active').each(function(){
                    if (!$(this).next().hasClass('active')) {
                        $(this).addClass('right-side');
                    }
                });
            });

Пример https://jsfiddle.net/wtcvhn2z/

8 строчек скрипта :dance:

Spass,
Спасибо, очень помогли.

Если у кого нибудь возникнет желание стать контрибютором, буду очень рад.