jQuery addClass () для ul: nth-child? - PullRequest
       9

jQuery addClass () для ul: nth-child?

0 голосов
/ 09 февраля 2012

Я не могу добавитьClass (), используя следующий код:

    var width = $('.pane').width();
    var column_index = $('#home-container div ul.hub').index('#home-container div ul');
    var column_counter = column_index + 1;

    $('#home-container div ul:nth-child(' + column_counter + ')').next().addClass('hub');

    $('#home-container').animate({"left": -width*column_counter}, 300);

Вот ПРИМЕР

Спасибо!

Ответы [ 3 ]

2 голосов
/ 10 февраля 2012

Проблема состоит из трех частей (в первую очередь связанных с использованием 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);

Только что проверил это на своем сайте, поэтому оно должно работать для вас.

0 голосов
/ 09 февраля 2012

next() метод получает ближайшего родственника каждого элемента в наборе соответствующих элементов.Если указан селектор, он извлекает следующего родного брата, только если он соответствует этому селектору.

В вашем случае $('#home-container div ul:nth-child(' + column_counter + ')').next() приведет к пустому набору, потому что нет никакого родственного брата для этого ul, который вы выбрали.Также nth-child селектор не поможет вам в этом случае.Попробуйте это.

var width = $('.pane').width();
var column_index = $('#home-container div ul.hub')
                   .index('#home-container div ul');
var column_counter = column_index + 1;

$('#home-container div ul').eq(column_counter).addClass('hub');
0 голосов
/ 09 февраля 2012

это var column_index = $('#home-container div ul.hub').index('#home-container div ul'); должно быть это var column_index = $('#home-container > div > ul.hub').index('#home-container > div > ul');

то же самое с другими. если что-то является потомком чего-либо, чтобы показать, что в качестве селектора используется символ больше, чем «>»

...