将CSS类分配给单个现有div类而不是所有div类

时间:2012-09-20 22:53:46

标签: javascript jquery class css-selectors addclass

我不确定我是否会以正确的方式解决这个问题,但我会尽力解释我正在尝试做的事情。

我有一个包含菜单的HTML页面。在该菜单中,有许多实例使用特定的CSS类。页面更改时,会通过URL传递一个值,然后用于突出显示所选项目并展开子菜单。

我遇到的问题是,当我尝试使用此值在正确的位置展开列表时,我实际上无法选择并添加新的CSS类或执行其他操作。我会在下面发布一些代码,这样你就可以更好地理解我所说的内容,然后给出一个示例场景。

if (param != null) {
    $('.menuButton')[paramvalue].addClass('on');
    $('.menuButton')[paramvalue].slideDown('normal');
}

这就是提供问题的javascript部分。在上面的例子中,paramvalue可以被0或1等替换。这部分到达我想要改变的特定类。我通过向HTML添加id并使用以下命令检索它来检查这一点:

 alert($('.menuButton')[paramvalue].id);

这返回了正确的ID值。

HTML如下:

<div class="menuButton" id="2">Button 1</div>
<div class="subMenu">
    <ul>
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
 </ul>
</div>
<div class="menuButton" id="3">Button 2</div>
<div class="subMenu">
<ul>
    <li><a href="#">Item 2.1</a></li>
    <li><a href="#">Item 2.2</a></li>
    </ul>
</div>

没有CSS与id一起使用,它们主要是为了测试而添加的。如果有必要,我可以发布相关的CSS,但我不认为这是问题的一部分。

我应该提一下,使用以下作品

$('.menuButton').addClass('on');

所以也许这会缩小问题范围。

如果您需要任何其他信息。请问。

感谢您的帮助。

3 个答案:

答案 0 :(得分:7)

通过使用$(selector)[index]将jQuery对象转换为没有addClass方法的DOM Element对象,您可以改为使用eq()方法:

$('.menuButton').eq(paramvalue).addClass('on');
$('.menuButton').eq(paramvalue).slideDown('normal');

您也可以链接您的方法:

$('.menuButton').eq(paramvalue).addClass('on').slideDown('normal');

答案 1 :(得分:2)

尝试:

$('.menuButton').eq(paramvalue).addClass('on');

答案 2 :(得分:2)

你也可以这样做:

$('.menuButton:eq('+paramvalue+')').addClass('on');

与选择所有元素然后将其减少到只有一个元素相比,它将获得性能提升。