Javascript-форум - Задание Css свойств по средствам Jquery

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Задание Css свойств по средствам Jquery (https://javascript.ru/forum/jquery/24651-zadanie-css-svojjstv-po-sredstvam-jquery.html)

Задание Css свойств по средствам Jquery

Задача: необходимо создать горизонт. меню. и каждому пункту меню задать фоновое изображение.

Допустим в HTML меню создано, а ссылки соотв. пунктов меню с исп. CSS выстроены горизонтально.

Теперь каждому пункту меню (1, 2, 3, ... n) нужно задать участок фонового изображения соотв. данной кнопке. С одной стороны его можно задать в CSS для каждой кнопки вручную, но можно ли придумать какой-либо автомат на все случаи жизни не зависимо от числа пунктов меню?

Что я имею ввиду...

1 Я знаю, что фоновое изображение каждого пункта меню различается на 150 px.

2 Теперь вызвав процедуру jquery и отфильтровав все необходимые мне ссылки (пункты меню) хочу поочередно их обработать и задать каждому следующему элементу значение фона на 150 px больше, чем предыдущему.

Как это проще всего реализовать?

var i = 0;
$("you_elemts").each(function(){
    $(this).css("background-position", "0 " + i + "px" );
    i += 150;
})

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

Искомые мною ссылки а являются дочерними элементами списка.

Все списки могут иметь различные заголовки title

title="tabs_with_list"
title="tabs"
title="list"

Теперь фильтруя по-очереди каждый элемент ищу соотвествующий title и счетчиком задаю начало следующему элементу.

Пример кода приведен ниже, но ноль реакции при этом, в чем неточность?

var i = 100;
            
            $('a').filter('*[class=tabs_link]').each(function(){
	          if( $(this).parent(['*[title=tabs]'])) {
	               $(this).css("background-position", "0 " + i + "px" );
                    i += 150;
                    }
               elseif ($(this).parent(['*[title=tabs_with_list]'])) {
                    $(this).css("background-position", "0 " + i + "px" );
                    i += 128;
                    }
               else {
                    $(this).css("background-position", "0 " + i + "px" );
                    i += 21;
               }}
	          }

Цитата:

Сообщение от IONEX

elseif

???

elseif на каком-то сайте (тема jquery была) увидел, пробовал также else if, тоже не работает.

Неработает и такой вариант:

var i = 100;
            $('a').filter('*[class=tabs_link]').each(function(){
	           if( $(this).parent(['*[title=tabs]'])) {
	               $(this).css("background-position", "0 " + i + "px" );
                    i += 150;
                    }
              if ($(this).parent(['*[title=tabs_with_list]'])) {
                    $(this).css("background-position", "0 " + i + "px" );
                    i += 128;
                    }
              if ($(this).parent(['*[title=list]'])) {
                    $(this).css("background-position", "0 " + i + "px" );
                    i += 21;
               }}
	          }

Кстати, работаю в php designer, очень нехватает отладчика, такой как например в С++, MATLAB и др., где пошагово можно просмотреть все переменные. Пробовал Дебаггер php designer, но ничего подобного не нашел. Где можно это подключить в php designer и слышал что такое есть в Zend studio (правда он великоват)? Если можно хотя бы ссылку на это дело...