Concatenate array element into jQuery selector

Question

I want to loop through an array in order to add CSS to menu links with jQuery. If a certain string appears in the URL, a certain CSS is assigned to a menu link that contains the same string.

Here's HTML (not sure if it really helps, but here it is):

<ul>
    <li>
        <a href="http://mysite.com/">HOME</a>
        <a href="http://mysite.com/about">ABOUT</a>
        <a href="http://mysite.com/brands">BRANDS</a>
        <a href="http://mysite.com/investors">INVESTORS</a>
        <a href="http://mysite.com/news">NEWS</a>
        <a href="http://mysite.com/videos">VIDEOS</a>
        <a href="http://mysite.com/contact">CONTACT</a>
    </li>
</ul>

Here's my code snippet:

var url_link = new Array();

url_link[0] = 'about';
url_link[1] = 'the-company';
url_link[2] = 'employment';
url_link[3] = 'customer-service';
url_link[4] = 'faqs';
url_link[5] = 'brands';
url_link[6] = 'news';
url_link[7] = 'videos';
url_link[8] = 'contact';

for (var i=0; i<url_link.length; i++) {
    if (location.href.indexOf(url_link[i])>=0) {
        $('.appearance-menus-'+url_link[i]+'>a').css("color", "#636363");
        $('.appearance-menus-'+url_link[i]+'>a').mouseout(function() {
            $(this).css("color", "#636363");
        });
    }
}

For some reason, this snippet breaks the website, and I suspect it's the problem of concatenating an array element into the jQuery selector. I must have messed up the syntax.

What is the proper way to do that?

What would really help, here, with this problem is HTML. Could we see? — David Thomas
– David Thomas, Commented Jun 17, 2013 at 14:28
This is a really bad way to set a simple active class to your links — adeneo
– adeneo, Commented Jun 17, 2013 at 14:29
everything should be fine, I'm not sure but try adding spaces to your jQuery selector $('.appearance-menus-'+url_link[i]+' > a') — Spokey
– Spokey, Commented Jun 17, 2013 at 14:30
Fixing this wouldn't be hard, but why not just use css, if i may ask? For instance, doesn't this menu system have a parent div with class name or id? Soething you could do as #parent li a, #parent li a:hover, #parent li a:active { color: #636363; } — SpYk3HH
– SpYk3HH, Commented Jun 17, 2013 at 14:31
Hey @SpYk3HH – long time no hear! – because there's AJAX also involved, long story, and it strips off all sorts of CSS rules, associated with classes that make the required CSS behavior for people who don't like JS in their browsers. How would you fix this, though? — KeithRules
– KeithRules, Commented Jun 17, 2013 at 14:35

pete · Accepted Answer · 2013-06-18 15:55:17Z

There's nothing particularly wrong with the code you have written, it should work to add the inline style to the selected links.

The selectors you are generating are the following:

'.appearance-menus-about > a'
'.appearance-menus-the-company > a'
'.appearance-menus-employment > a'
'.appearance-menus-customer-service > a'
'.appearance-menus-faqs > a'
'.appearance-menus-brands > a'
'.appearance-menus-news > a'
'.appearance-menus-videos > a'
'.appearance-menus-contact > a'

You may want to make sure that these exist in your document.

Finally, I took a slight liberty of writing a more efficient version:

var url_links = [
        'about',
        'the-company',
        'employment',
        'customer-service',
        'faqs',
        'brands',
        'news',
        'videos',
        'contact'
    ],
    links = url_links.filter(function (val, index, arr) {
        return location.href.toLowerCase().indexOf(val.toLowerCase()) > -1;
    }),
    link = '';
for (i = 0; i < links.length; i += 1) {
    link = links[i];
    selector = '.appearance-menus-' + link + ' > a';
    console.log(selector);
    $(selector).mouseout(function() {
        $(this).css('color', '#636363');
    }).trigger('mouseout');
}

Community · Accepted Answer · 2017-05-23 10:25:07Z

1

Because indexOfis not a cross browser function, you should use an alternative (using http://www.w3schools.com/jsref/jsref_search.asp for example) or implement it yourself like this : How to fix Array indexOf() in JavaScript for Internet Explorer browsers

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jun 17, 2013 at 14:31

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

5 Comments

adeneo Over a year ago

But location.href is a string, and the only browsers that doesn't support string.indexOf would be NetScape 1.0 or something?

SpYk3HH Over a year ago

@adeno some IE's don't support it

adeneo Over a year ago

@SpYk3HH - True, it was introduced in IE6, so IE5 or lower doesn't support it!

pete Over a year ago

@adeneo: String.indexOf works just fine across browsers. Array.indexOf is what @sdespont is referring to in the answer.

adeneo Over a year ago

@pete - I get that, but location.href is not an array, and that was sort of the point, it's a string, and on strings the support for indexOf isn't an issue unless you need to support IE5.

Collectives™ on Stack Overflow

Concatenate array element into jQuery selector

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related