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);

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

Answer 2

这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');

与其他人一样。如果某事物的某个孩子表明作为选择器使用大于符号“＆gt;”

Answer 3

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');

jQuery addClass（）到ul：nth-child？

3 个答案:

jQuery addClass（）到ul：nth-​​child？

3 个答案:

jQuery addClass（）到ul：nth-child？