多类选择器答案

【问题标题】：Multiple classes selector多类选择器
【发布时间】：2014-03-03 22:25:56
【问题描述】：

我不明白为什么这不起作用

我有多个类的锚

<div id="left_menu">
<ul>
    <li>
                    <h1>Nobelova</h1>
                    <a class="manned-flight active" href="#manned-flight">View</a>
                </li>
                <li>
                    <h1>Vízia</h1>
                    <a class="frameless-parachute" href="#frameless-parachute">View</a>
                </li>
                <li>
                    <h1>Projekt</h1>
                    <a class="english-channel" href="#english-channel">View</a>
                </li>
                <li>
                    <h1>Lokalita</h1>
                    <a class="about" href="#about">View</a>
                </li>
                <li>
                    <h1>Mapa</h1>
                    <a class="about" href="#about">View</a>
                </li>
            </ul>

我只需要测试其中一些锚是否具有“活动”类，以及是否首先有载人飞行、降落伞飞行、天空飞行类。为什么这段代码不起作用？

if($("#left_menu ul li a").hasClass('active')){
//do something
}

当此“活动”类被另一段代码添加时，此代码永远不会获得活动类锚

if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
    $('#left_menu ul li a.manned-flight').addClass('active');

【问题讨论】：

这都包裹在一个div/ul/li里面了？为什么不用 id 而不是 class？

标签： jquery class double selector

【解决方案1】：

当在返回多个元素的选择器上执行类似.hasClass() 的测试时，它只会对第一个元素执行测试，所以$("#left_menu ul li a").hasClass('active') 等价于$("#left_menu ul li a").first().hasClass('active')，所以它只会在以下情况下解析为真第一个链接有 active 类。

如果您只需要确定一个（或多个）链接是否具有active 类，只需在定位active 类（working example）时检查返回集合的长度：

if($("#left_menu ul li a.active").length > 0)
{
    console.log($("#left_menu ul li a.active").length);
}

如果您需要知道具有 active 类的实际链接，请使用 .each() 来遍历集合 (working example)：

$("#left_menu ul li a").each(function()
{
    if($(this).hasClass('active'))
    {
        console.log($(this).attr('href'));
    }
});

【讨论】：

谢谢，您的代码有效，但只有当我手动将“活动”类添加到 html 时。当这个“活动”类是由提到的一段代码生成的，而不是你的示例正常工作。问题一定出在那段代码的某个地方。

【解决方案2】：

因为你的代码中没有 li 标签。

改为：

$("#left_menu a").hasClass('active')

【讨论】：

【解决方案3】：

试试

if($("#left_menu.ul.li.a").hasClass('active')){
//do something
}

【讨论】：