Add attribute in in Javascript

Question

How to write $('label.someClass').attr('valid', true); in Java Script with out using jQuery?

The selector part "$('label.someclass')" is kind of tricky, can you give the element an ID? Or are you trying to apply this attribute to all elements with a specified class? htmlcssjavascript.com/web/… this link could help you. — Jason Sperske
– Jason Sperske, Commented Feb 2, 2012 at 16:58

jAndy · Accepted Answer · 2012-02-02 16:59:03Z

4

Array.prototype.forEach.call(document.querySelectorAll('label.someClass'), function( label ) {
    label.setAttribute('someAttribute', 'someValue');
});

which implies that the browser is capable of ES5. An alternative for .querySelectorAll could be .getElementsByClassName too here.

answered Feb 2, 2012 at 16:59

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

1 Comment

jAndy Over a year ago

please specify a reason for downvoting. If I made a mistake, help me and other guys out.

ShankarSangoli · Accepted Answer · 2012-02-02 17:11:06Z

Find all the label elements using getElementsByTagName which gives an array of matching elements. Run a loop on this array and check if the class name exists and set the attribute using setAttribute method.

if(document.getElementsByClassName){
}
else{
var labels = document.getElementsByTagName('label');
for(var i = 0;i<labels.length;i++){
    if(new RegExp("\\bsomeClass\\b", "g").test(labels[i].className)){
         labels[i].setAttribute('valid', true); 
    }
}

If the browser supports getElementsByClassName then we can use that conditionally.

if(document.getElementsByClassName){
    var elements = document.getElementsByClassName('someClass');
    for(var i = 0;i<elements.length;i++){
        ifelements[i].tagName.toLowerCase() == 'label'){
            elements[i].setAttribute('valid', true); 
    }
}
else{
    var labels = document.getElementsByTagName('label');
    for(var i = 0;i<labels.length;i++){
        if(new RegExp("\\bsomeClass\\b", "g").test(labels[i].className)){
            labels[i].setAttribute('valid', true); 
    }
}

@ajax333221 - Because it is not supported by all the classes. Though we can check for it and use it accordingly.

driangle · Accepted Answer · 2012-02-02 17:18:40Z

1

Using a regular expression to match the class:

var labels = document.getElementsByTagName('label');
for(var i = 0;i<labels.length;i++){
    var classes = labels[i].className;
    if(classes && classes.match(/^(\s*|.*\s+)someClass(\s*|\s+.*)$/)){
         labels[i].setAttribute('valid', true); 
    }
}

edited Feb 2, 2012 at 17:18

answered Feb 2, 2012 at 17:09

driangle

11.8k6 gold badges50 silver badges56 bronze badges

Comments

Daniel A. White · Accepted Answer · 2012-02-02 16:55:52Z

0

document.getElementById("myimage").setAttribute("src","another.gif")

Try this Tutorial

edited Feb 2, 2012 at 16:55

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

answered Feb 2, 2012 at 16:55

deltree

3,8242 gold badges34 silver badges53 bronze badges

2 Comments

Quentin Over a year ago

The code in the question doesn't use an id to find the elements it is dealing with.

eomeroff Over a year ago

I don't have id, just a class on label element.;

talnicolas · Accepted Answer · 2012-02-02 16:56:11Z

0

Use the setAttribute() method (doc).

answered Feb 2, 2012 at 16:56

talnicolas

14.1k7 gold badges38 silver badges56 bronze badges

4 Comments

Quentin Over a year ago

What about finding all the label elements which are members of the someClass class?

eomeroff Over a year ago

How to select label by class in pure Java Script?

Quentin Over a year ago

In pure JavaScript? You can't. You need a DOM API. (OK, so I hate the term 'pure')

Nick Bork Over a year ago

getElementsByClassName though you will want to check to make sure it is avalaible in all browser versions. You could have to loop through each and check to see if the type if a lable. OR you can use getelementsbytagname and loop through them to find the class.

Collectives™ on Stack Overflow

Add attribute in in Javascript

5 Answers 5

1 Comment

4 Comments

Comments

2 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

Comments

2 Comments

4 Comments

Related