Проблема состоит из трех частей (в первую очередь связанных с использованием index()
).
Во-первых, index()
принимает элемент $('#el')
, а не селектор '#el'
...
Во-вторых, вы говорите: «Получите все <ul class="hub">
с, а затем скажите мне, каков индекс для первого <ul>
... хорошо, это всегда будет 1.
Что вы имеете в виду, получите все <ul>
с, затем покажите мне индекс <ul class="hub">
.
Короткая версия? Замени свою вторую строку этой ...
var column_index = $('#home-container div ul').index( $('#home-container div ul.hub') );
... однако, чтобы остальная часть вашего кода работала, вам нужно удалить class="hub"
из предыдущего элемента и добавить его к текущему. Поэтому замените свою четвертую строку на эти ...
$('#home-container > div:nth-child(' + column_counter + ') > ul').removeClass('hub');
$('#home-container > div:nth-child(' + (column_counter+1) + ') > ul').addClass('hub');
... или, что еще проще, замените весь кодовый набор этим ...
var width = $('.pane').width();
var column_index = $('#home-container div ul').index( $('#home-container div ul.hub') );
var column_counter = column_index + 1;
$('#home-container > div:nth-child(' + column_counter + ') > ul').removeClass('hub');
$('#home-container > div:nth-child(' + (column_counter+1) + ') > ul').addClass('hub');
$('#home-container').animate({"left": -width*column_counter}, 300);
Только что проверил это на своем сайте, поэтому оно должно работать для вас.