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, Jun 17 '13 at 14:28
This is a really bad way to set a simple active class to your links — adeneo, Jun 17 '13 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, Jun 17 '13 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, Jun 17 '13 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, Jun 17 '13 at 14:35
In what manner does this "break" your website? What errors are you getting? — pete, Jun 17 '13 at 15:11
I checked the code though. It seems to be correct. I may have made a mistake somewhere else, I'm beginning to suspect a missing closing bracket or something similar. — KeithRules, Jun 17 '13 at 15:44

score 1 · Answer 1 · edited May 23 '17 at 10:25

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 '17 at 10:25

Community

1
1

answered Jun 17 '13 at 14:31

sdespont

13,915
9
56
97

But `location.href` is a string, and the only browsers that doesn't support `string.indexOf` would be NetScape 1.0 or something? – adeneo Jun 17 '13 at 14:34
1

@adeno some IE's don't support it – SpYk3HH Jun 17 '13 at 14:36
@SpYk3HH - True, it was [introduced in IE6](http://msdn.microsoft.com/en-us/library/53xtt423%28v=vs.94%29.aspx), so IE5 or lower doesn't support it! – adeneo Jun 17 '13 at 14:59
@adeneo: `String.indexOf` works just fine across browsers. `Array.indexOf` is what @sdespont is referring to in the answer. – pete Jun 18 '13 at 15:49
@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. – adeneo Jun 18 '13 at 16:20

score 1 · Accepted Answer · answered Jun 18 '13 at 15:55

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');
}

Concatenate array element into jQuery selector

2 Answers2