How do I get the hash of each link?

Question

I'm trying to code an active link state on scroll per section.

I'm trying to get the hash of the link.

My current code is for this line 'console.log($(this).eq(i).hash);' is returning 'undefined'.

Thanks

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Scroll</title>
        <style media="screen">
            body, html {
                padding: 0;
                margin: 0;
            }
            section {
                padding: 6rem;
                text-align: center;
            }
            section:nth-child(1) {
                background: orangered;
            }
            section:nth-child(2) {
                background: steelblue;
            }
            section:nth-child(3) {
                background: orange;
            }
            section:nth-child(4) {
                background: purple;
            }
            section:nth-child(5) {
                background: red;
            }
            section:nth-child(6) {
                background: black;
                color: #fff;
            }

            nav {
                background: black;
                color: #fff;
                padding: 2rem 0;
                text-align: center;
                position: fixed;
                top: 0;
                width: 100%;
            }

            ul {
                display: inline-block;
            }

            ul > li {
                display: inline-block;
                padding-right: 5px;
            }

            .active {
                background: grey!important;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <a href="#section1">Section 1</a>
                <a href="#section2">Section 2</a>
                <a href="#section3">Section 3</a>
                <a href="#section4">Section 4</a>
                <a href="#section5">Section 5</a>
                <a href="#section6">Section 6</a>
            </ul>
        </nav>
        <section>
            <h2 id="section1">Section 1</h2>
        </section>
        <section>
            <h2 id="section2">Section 2</h2>
        </section>
        <section>
            <h2 id="section3">Section 3</h2>
        </section>
        <section>
            <h2 id="section4">Section 4</h2>
        </section>
        <section>
            <h2 id="section5">Section 5</h2>
        </section>
        <section>
            <h2 id="section6">Section 6</h2>
        </section>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script type="text/javascript">
        $("a[href^='#']").each(function(i){
            console.log($(this).eq(i).hash);
        });
            $(window).scroll(function(){
                $("section").each(function(i){
                    if( $(document).scrollTop() >= $("section").eq(i).offset().top) {
                        $("section").eq(i).addClass("active");
                    } else {
                        $("section").eq(i).removeClass("active");
                    }
                });
            });
        </script>
    </body>
</html>

charlietfl · Accepted Answer · 2016-10-12T15:06:24.207

2

The jquery object doesn't have a hash property, the underlying dom element does

Instead of

$(this).eq(i).hash

Try

this.hash

edited Oct 12 '16 at 15:06

answered Oct 12 '16 at 15:01

charlietfl

170,828
13
121
150

This is the best answer, and better than the marked duplicate. Also if you wanted to get rid of the #, `this.hash.slice(1);` – Keith Oct 12 '16 at 15:12
This works thanks. How do I know when it's the jquery obj or the DOM one? – Joe Consterdine Oct 12 '16 at 15:18
@JoeConsterdine anything wrapped in `$()` returns a jQuery object that internally contains references to elements that match – charlietfl Oct 12 '16 at 15:19
@JoeConsterdine most jQuery functions return a jQuery object - the exceptions are those that return e.g. CSS properties, or like `.get` which is explicitly intended to return a specific DOM object from a jQuery collection (and unlike `.eq()` which does return a jQuery object) – Alnitak Oct 12 '16 at 15:20
Thanks for the replies but still confused haha. $("a[href^='#']").each(function(i){ console.log(this); }); // This is a DOM element console.log($(".section")); // This is a jquery object. Why is section a jquery object and the links not? – Joe Consterdine Oct 12 '16 at 15:30
The `.each()` function unwraps the jQuery object and passes each DOM element contained therein as `this` to the supplied callback – Alnitak Oct 12 '16 at 15:52

How do I get the hash of each link?

1 Answers1