Dynamically set class in anchor doesn't work?

Question

I have been trying to dynamically adding a class name into anchors but somehow it does not work. My codes are:

HTML:

<div class="list-group" id="setActive">
    <a href="#">aaa</a>
    <a href="#">bbb</a>
    <a href="#">ccc</a>
</div>

JavaScript:

 $(document).ready(function() {

    var setActive = document.getElementById('setActive'),
    var anchor = setActive.getElementsByTagName('a'),

    for (var i = 0; i < anchor.length; i++) {

        anchor[i].className = "list-item";
    }
 }

Please help!

possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — cmbuckley, Aug 12 '14 at 16:34
The commas `,` trailing each `var` declaration should be semicolons `;`. They're creating SyntaxErrors since the parser is expecting another variable to follow and is instead finding the keywords `var` and `for`. — Jonathan Lonowski, Aug 12 '14 at 16:35
The `)` for `.ready()` is also missing from what you posted. Fixing those, it should work fine. http://jsfiddle.net/1f93mup7/ — Jonathan Lonowski, Aug 12 '14 at 16:44

score 1 · Answer 1 · answered Aug 12 '14 at 16:33

1

As I see you are using jQuery there, so you can simplify your code to:

$(document).ready(function() {
    $( '#setActive a' ).addClass( 'list-item' );
});

answered Aug 12 '14 at 16:33

antyrat

27,479
9
75
76

Tried this, for some reasons the "list-item" is not set whatsoever – idleonbench Aug 12 '14 at 16:35
Here's an example: http://jsfiddle.net/jjbdrzp5/ - if this didn't work for you, it's likely that you have a different problem. – cmbuckley Aug 12 '14 at 16:37
Works fine for me. See this jsFiddle: http://jsfiddle.net/41g5fc4w/ Are you sure you have connected jQuery to your page? – antyrat Aug 12 '14 at 16:37
@antyrat haha, almost identical fiddles :-) – cmbuckley Aug 12 '14 at 16:38
Yea it works on fiddle but does anyone know why my original codes don't work? I did it that way because I might need to set class to specific anchors later. Thanks! – idleonbench Aug 12 '14 at 16:42
1

Look into console, maybe there is some errors, show us more code or provide fiddle too. It's hard to say – antyrat Aug 12 '14 at 16:43

score 0 · Answer 2 · edited Aug 12 '14 at 16:42

0

Try this

$(document).ready(function() {
    var anchors = document.getElementsByTagName('a');

    for (var i = 0; i < anchors.length; i++) {
        anchors[i].className = "list-item";
    }
 }

This will give you an array of all the anchor tags that are present in the DOM.

edited Aug 12 '14 at 16:42

Jeff Davis

4,736
4
38
44

answered Aug 12 '14 at 16:39

maddy

1

Yes but the problem is on my webpage I have a whole bunch of other anchors that I don't want to set. That's why I specified an ID. – idleonbench Aug 12 '14 at 16:44
Then the answer given by Benjamin should do it. – maddy Aug 12 '14 at 18:20

score 0 · Answer 3 · answered Aug 12 '14 at 16:51

no need for Jquery for this just use dom selectors like this

var setActive = document.getElementById('setActive'),
    anchors = setActive.querySelectorAll('a');
for (var i = 0; i < anchors.length; i++)
    anchors[i].className = "list-item";

you have different type of issues with your code, first you need to finish declaration with ; not , and even if you want to use , you don't have to start with var again.

if you are only using JQuery to check dom load you can skip it with this.

demo here JSfiddle

score 0 · Answer 4 · answered Aug 13 '14 at 03:29

Since you don't seem to want to use jQuery, here is a native version, you just had a few minor syntax errors, the code was generally fine! I changed some things to how I would do it but the general structure is intact

http://jsfiddle.net/jjbdrzp5/3/

HTML

<div class="list-group" id="setActive">
    <a href="#">aaa</a>
    <a href="#">bbb</a>
    <a href="#">ccc</a>
</div>

CSS

.list-item {
    color: red;
}

JAVASCRIPT

document.addEventListener('DOMContentLoaded', function() {

    var setActive = document.querySelector('#setActive'),
        anchors = setActive.querySelectorAll('a');

    [].forEach.call(anchors, function(anchor) {
        anchor.classList.add("list-item");
    });

});

score 0 · Accepted Answer · answered Aug 13 '14 at 03:40

Refer to this fiddle: http://jsfiddle.net/jjbdrzp5/4/

The main reason your code isn't working is sytax errors. Here it is cleaned up:

$(document).ready(function() {

    var setActive = document.getElementById('setActive'),
        anchor = setActive.getElementsByTagName('a');

    for (i = 0; i < anchor.length; i++) {
        anchor[i].className = "list-item";
    }

 });

However you can do this all with jQuery:

$(document).ready(function() {
    $('#setActive a').addClass('list-item');
});

Also make sure you're correctly mapping the $ sign to jQuery in your JS file:

(function($) {
    // docready etc etc here
}(jQuery));

Hope that helps.

Though all the other answers are great too but I think the syntax errors are the major problems in my case. Thanks a lot guys! — idleonbench, Aug 18 '14 at 13:30

Dynamically set class in anchor doesn't work?

5 Answers5