如何检查带有 href="something" 的 div 是否具有某些带有 Jquery 的 class

Question

我想检查具有特定 href 的 div 是否也有特定的 class。我已经编码了这个导航：

<nav>
    <div class="nav-wrapper">
        <ul class="normal-nav hide-on-med-and-down">
            <li><a class="" href="#chi">Chi Siamo</a></li>
            <li><a class="" href="#dirigenza">Dirigenza</a></li>
            <li><a class="" href="#squadre">Squadre</a></li>
            <li><a class="" href="#orariPrezzi">Orari e Prezzi</a></li>
            <li><a class="" href="#modulistica">Modulistica</a></li>
            <li><a class="" href="#contatti">Contattaci</a></li>
            <li><a class="" href="#fotogallery">Fotogallery</a></li>
        </ul>
    </div>
</nav>

A class active 被添加到 <a> 元素，相对于用户向下滚动的位置，因此 <a> 看起来像这样：

<a class="active" href="#dirigenza">Dirigenza</a>

我想不断检查 normal-nav <ul> 中的哪个元素具有 class active（我有 scrollFire() JQuery 插件）：

$('body').scrollfire({
    // Offsets
    offset: 0,
    topOffset: 0,
    bottomOffset: 0,
    onScrollAlways: function(elm, distance_scrolled) {
    },
});

如果 <a> 活动元素是具有 href="#chi"、href="#dirigenza" 等的元素，则做一些事情。

我该怎么做？

Answer 1

$("a.active[href='#chi']")

Will select all a with class active 并且 href 是 #chi.

$("a.active[href='#chi'], a.active[href='#dirigenza']")

将这个用于多个 hrefs

$("a.active[href='#chi']").length

会给出匹配元素的个数

Answer 2

您可以使用hasClass方法：

$('body').scrollfire({
    // Offsets
    offset: 0,
    topOffset: 0,
    bottomOffset: 0,
    onScrollAlways: function(elm, distance_scrolled) {
      if($(elm).hasClass('testingclass')){
         console.log('testingclass');
      }
    },
});

Answer 3

您可以使用$("a.active") 将当前a 标记为活动。然后，您可以使用 $("a.active").attr("href") 获取该活动元素的 href 值，并在 if 或 switch 语句中使用它来管理不同的情况。

var activeHrefValue = $("a.active").attr("href");
if (activeHrefValue == "theValueToBeChecked") {
   doSomething();
}

在您的具体情况下，我认为这可能是一个很好的解决方案：

$('body').scrollfire({
    // Offsets
    offset: 0,
    topOffset: 0,
    bottomOffset: 0,
    onScrollAlways: function(elm, distance_scrolled) {
        switch($("a.active").attr("href")){
            case "#chi":
                doSomething(elm);
                break;
            case "...":
                doSomethingElse(elm);
                break;
            default: 
                doDefaultSomething(elm);
        }
    },
});

switch 部分可以根据您的需要用一系列 if-else 语句替换。

如何检查带有 href="something" 的 div 是否具有某些带有 Jquery 的 class

How to check if a div with href="something" has certain class with Jquery

javascript

jquery

scroll

materialize