filter li elements by current browser url

219
December 10, 2017, at 5:14 PM

im currently trying to put active class to the navigation by trying to detect the browser url... my code looks like

    $('[ui-nav] a, [data-ui-nav] a').filter( function() {
        console.log(location.href)
        console.log($(this).attr('href'))
        return location.href.indexOf( $(this).attr('href') ) != -1;
    }).parent().addClass( 'active' );

the output:

app.js:12758 http://localhost:8000/blog/welcome-to-my-blog
app.js:12759 /
app.js:12758 http://localhost:8000/blog/welcome-to-my-blog
app.js:12759 /blog
app.js:12758 http://localhost:8000/blog/welcome-to-my-blog
app.js:12759 /profile
app.js:12758 http://localhost:8000/blog/welcome-to-my-blog
app.js:12759 /test

my navigation:

Home -> /
Blog -> /blog
Profile -> /profile
Testing -> /test

<ul class="nav" data-ui-nav>
    <li class="nav-header hidden-folded">
        <span class="text-xs text-muted">Main</span>
    </li>
    <li>
        <a href="/">
            <span class="nav-icon">
                <i class="material-icons">
                    play_circle_outline
                </i>
            </span>
            <span class="nav-text">Home</span>
        </a>
    </li>
    <li>
        <a href="/blog">
            <span class="nav-icon">
                <i class="material-icons">
                    play_circle_outline
                </i>
            </span>
            <span class="nav-text">Blog</span>
        </a>
    </li>
    <li>
        <a href="/profile">
            <span class="nav-icon">
                <i class="material-icons">
                    play_circle_outline
                </i>
            </span>
            <span class="nav-text">Profile</span>
        </a>
    </li>
    <li>
        <a href="/test">
            <span class="nav-icon">
                <i class="material-icons">
                    play_circle_outline
                </i>
            </span>
            <span class="nav-text">Testing</span>
        </a>
    </li>
</ul>

by this example the Home and Blog li get an active class.. if anybody could give me a hint how to correct this short code i would be happy :)

best regards

Answer 1

try comparing the pathname properties instead

return location.pathname === this.pathname;

Examples of link pathnames:

$('a').each(function(){ 
   console.log('Link pathname: ', this.pathname); 
});
a{display:inline-block; padding:5px 10px; background:yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="https://stackoverflow.com/test">https://stackoverflow.com/test</a> 
<a href="/profile">/profile</a> 
<a href="/">/</a>

Answer 2

ive founded a solution that work.. okay its not the best, but im a newbie ;)

    $('[ui-nav] a, [data-ui-nav] a').filter( function() {
        if ($(this).attr('href') === '/') {
            if (location.pathname === $(this).attr('href')) {
                return true
            } else { return false }
        } else {
            return location.href.indexOf( $(this).attr('href') ) != -1;
        }
    }).parent().addClass( 'active' );
Rent Charter Buses Company
READ ALSO
Ajax call on setInterval timer not working

Ajax call on setInterval timer not working

I have what should be a very simple little processI have an interval timer which, when it expires, makes an ajax call to the server

251
How to access a public function in Javascript

How to access a public function in Javascript

I'm not a JavaScript guy, so I'm not sure how to get this working

212
how to define process in flowchart in c#

how to define process in flowchart in c#

I am working on HRMS project which is in mvc aspnet c# client have a requirement like if someone applied for leave he should able to check his status on flowchart due to multiple approval required for leave approval

225
Implementing a web app like straight outta campaign in 4 days [on hold]

Implementing a web app like straight outta campaign in 4 days [on hold]

I just wanted to implement like straight outta campaign in 4 days it looks something like thisstraightouttasomewhere

138