CODEWITHSUNDEEP
javascriptjquerysplit
Maurice
Maurice

Reputation: 127

javascript: Split an HREF string using a hash character

I have the following code that returns the url of each of the links in the function:

var nav_link;
$('#nav_what-we-do').find('.top-dropdown').find('a').each(function(index, elem) {
    console.log("Descendant: " + elem.tagName + " " + elem.href);
    the_link = $(this);
    nav_link = elem.href.split('#');
    if (nav_link[0] === '/what-we-do/') {
        the_link.attr('href','#'+nav_link[1]);
        the_link.click(function() {
            var tab_id = $(this).attr('href');
            selectTab(tab_id);
            return false;
        });
    }
});

The console prints links like:

Descendant: A http://localhost/testsite/what-we-do/#solutions
Descendant: A http://localhost/testsite/what-we-do/#features
Descendant: A http://localhost/testsite/what-we-do/features/test
Descendant: A http://localhost/testsite/what-we-do/solutions/test2

Now I want only those links that contain the hash(#) and split them using this hash. Then I want to check if array(0) contains the characters "/what-we-do/". I have tried to split the links like this:

nav_link = elem.href.split('#');

but the IF part is not working.

Can someone tell me what I am doing wrong.

EDIT

According to suggestions from T.J.

$('#nav_what-we-do').find('.top-dropdown').find('a').each(function(index, elem) {
    //console.log("Descendant: " + elem.tagName + " " + elem.href);
    var the_link = elem.href,
        hashIndex = the_link.split("#");
    if(hashIndex.length == 2) {
        console.log(hashIndex);
        console.log("Descendant: " + elem.tagName + " " + elem.href);
        console.log('First part is: ' + hashIndex[0].indexOf("/what_we_do/"));
    }
    if (hashIndex.length == 2 && hashIndex[0].indexOf("/what_we_do/") !== -1) {
        the_link.attr('href', "#" + hashIndex[1]);
        the_link.attr('href', the_link.substring(hashIndex));
        the_link.click(function() {
            var tab_id = $(this).attr('href');
            selectTab(tab_id);
            return false;
        });
    }
});

If I print in console I get:

["http://localhost/testsite/what-we-do/", "solutions"] site_javascript.js:133
Descendant: A http://localhost/testsite/what-we-do/#solutions site_javascript.js:134
First part is: -1 site_javascript.js:135

["http://localhost/testsite/what-we-do/", "features"] site_javascript.js:133
Descendant: A http://localhost/testsite/what-we-do/#features site_javascript.js:134
First part is: -1

Where first part should be the value hashIndex[0].indexOf("/what_we_do/")

What could be going on since hashIndex has the string /what-we-do/?

Upvotes: 1

Views: 3629

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1075337

I think you probably want:

var nav_link;
$('#nav_what-we-do').find('.top-dropdown').find('a').each(function(index, elem) {
    console.log("Descendant: " + elem.tagName + " " + elem.href);
    var the_link = elem.href,
        hashIndex = the_link.indexOf("#");
    if (hashIndex !== -1 && the_link.indexOf("/what-we-do/") !== -1) {
        the_link.attr('href', the_link.substring(hashIndex));
        the_link.click(function() {
            var tab_id = $(this).attr('href');
            selectTab(tab_id);
            return false;
        });
    }
});

(Note that I declared the_link; if it's already declared somewhere outside the iterator function, you could remove that, but it seems like it should be a local.)

Or alternately (since technically, the above would match if the /what-we-do/ were after the hash):

var nav_link;
$('#nav_what-we-do').find('.top-dropdown').find('a').each(function(index, elem) {
    console.log("Descendant: " + elem.tagName + " " + elem.href);
    var the_link = elem.href,
        split = the_link.split("#");
    if (split.length === 2 && split[0].indexOf("/what-we-do/") !== -1) {
        the_link.attr('href', "#" + split[1]);
        the_link.click(function() {
            var tab_id = $(this).attr('href');
            selectTab(tab_id);
            return false;
        });
    }
});

There I've limited it so that if there is a hash after the first hash, it's not a match.

Upvotes: 3

Mitya
Mitya

Reputation: 34596

This is failing because you're checking an entire, absolute path (http://.....) against just a token of it (/what-we-do/).

There's several ways around this - the easiest is probably to check whether the token you're looking for is IN the URL (rather than is exactly equal to it, as currently).

if (nav_link.indexOf('#') != -1 && nav_link[0].indexOf('/what-we-do/') != -1) {
    ...

Upvotes: 0

Related Questions