多类选择器

Question

我不明白为什么这不管用

我有多个类的锚

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

Answer 1

当在返回多个元素的选择器上执行像.hasClass()这样的测试时，它只对第一个元素执行测试，因此$("#left_menu ul li a").hasClass('active')等同于$("#left_menu ul li a").first().hasClass('active')，因此只有当第一个链接有active类时，它才会解析为true。

如果您只需要确定一个(或多个)链接中是否有active类，那么在针对active类(工作实例)时，只需检查返回集合的长度：

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

如果您需要知道具有active类的实际链接，请使用.each()来迭代集合(工作实例)：

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

Answer 2

因为您的代码中没有li标记。

改为：

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

Answer 3

试一试

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