jQuery access data-url element and check with url parameter

Question

First of all; I'm sorry if my quesiton is irrelevant, because i'm newbie on jQuery

I have a menu in my website. Here is HTML;

<ul class="page-sidebar-menu">
    <li data-link="index.php"><a href="index.php">Home</a></li>
    <li data-link="logout.php"><a href="logout.php">Logout</a></li>
</ul>

I'm taking url path to compare with li data-link to add active class to li

But unfortunately it's returning undefined.

Here is my javascript / jQuery;

var pathname = window.location.pathname; // Returns path only
var encPath  = encodeURIComponent(pathname);  // Encoded URL
var splPath  = encPath.split('%2F');
var cleanUrl = splPath.pop(); // Clean Url
var dataUrl  = $('ul.page-sidebar-menu > li').attr('data-link');
$(dataUrl).each(function( i ) {
    if(dataUrl === cleanUrl) {
        dataUrl.addClass('active');
    }
});

So what's wrong with my code? How can i fix it? Any help greatly appricated.

PS: Sorry for bad English.

Satpal · Accepted Answer · 2016-12-21 12:46:59Z

3

You need to iterate $('ul.page-sidebar-menu > li') and test each elements data-url attribute.

$('ul.page-sidebar-menu > li').each(function( i ) {
    if($(this).attr('data-link') === cleanUrl) {
        $(this).addClass('active');
    }
});

You can also use Element.dataset property to access all the custom data attributes (data-*) set on element like this.dataset.link

Code can be improved as

$('ul.page-sidebar-menu > li').filter(function( i ) {
    return this.dataset.link === cleanUrl;            
}).addClass('active');

edited Dec 21, 2016 at 12:46

answered Dec 21, 2016 at 12:42

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdennour TOUMI · Accepted Answer · 2016-12-21 12:51:06Z

1

use $().data('link') to retrieve the value of data-link attribute :

$('ul.page-sidebar-menu > li')
  .filter((index, item) => $(item).data('link') === cleanUrl)
  .addClass('active')

answered Dec 21, 2016 at 12:51

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Comments

Mairaj Ahmad · Accepted Answer · 2016-12-21 12:48:00Z

1

You can use each on li to get data-link of each li and match with cleanUrl

var pathname = window.location.pathname; // Returns path only
var encPath = encodeURIComponent(pathname);  // Encoded URL
var splPath = encPath.split('%2F');
var cleanUrl = splPath.pop(); // Clean Url
$('ul.page-sidebar-menu > li').each(function(){
if ($(this).attr("data-link") === cleanUrl) {
    dataUrl.addClass('active');
   }
});

answered Dec 21, 2016 at 12:48

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

Comments

Rajshekar Reddy · Accepted Answer · 2016-12-21 12:52:03Z

1

So what's wrong with my code? How can i fix it? Any help greatly appricated.

Problem: is with this line of code $('ul.page-sidebar-menu > li').attr('data-link'); And later you are trying to loop it. The issue is even though this syntax $('ul.page-sidebar-menu > li') returns you array of matched elements once you use .attr on it it will return you only the value of first element in the array. Hence you are ending up with only one iteration.

Solution: As already other answers have stated, Loop your $('ul.page-sidebar-menu > li') and then play with the $(this).data('link')

$('ul.page-sidebar-menu > li').each(function( i ) {
    if($(this).data('link') === cleanUrl) {
        $(this).addClass('active');
        return false;   // break loop as we found the link.
    }
});

answered Dec 21, 2016 at 12:52

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

2 Comments

Satpal Over a year ago

$(this).data('link') will unnecessarily populate the internal cache, better to use $(this).attr('data-link') or this.dataset.link

Rajshekar Reddy Over a year ago

@Satpal oh.. But I thought using .data was the best way.. Thanks for the info..

Collectives™ on Stack Overflow

jQuery access data-url element and check with url parameter

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related