Задание 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;
}}
}
|
Цитата:
|
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 (правда он великоват)? Если можно хотя бы ссылку на это дело...
|
| Часовой пояс GMT +3, время: 07:42. |