javascript - jQuery addClass() 到 ul :nth-child?

Question

我无法使用以下代码添加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);

这是EXAMPLE

谢谢!

Answer 1

问题分为三部分(主要与您对 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);

刚刚在您的网站上对此进行了测试，因此它应该适合您。