Setting an variable using jquery .attr and then changing it

Question

I have a bunch of fields and some of them have labels like

<input id="1" /><label for="1" />
<input id="2" />
<input id="3" /><label for="3" />

For every label i want to do something like

var for_label = $(label).attr("for");

and then use the variable to apply a style to the appropriate input-field. How should I do this? I would much appreciate an example, I'm pretty new to Javascript...

thanks a bunch, it was just a example thoght, the actual html is a lot more complex! — Himmators
– Himmators, Commented Nov 12, 2010 at 18:02
Kristoffer, I know you have a lot of choices out there when choosing and answer and I would just like to state that I enjoy answering your questions, in particular, and that you're a super guy — hunter
– hunter, Commented Nov 12, 2010 at 18:09

Darin Dimitrov · Accepted Answer · 2010-11-12 18:20:00Z

4

$('label').each(function() {
    // Get corresponding input element:
    var input = $('#' + $(this).attr('for'));
    // apply some CSS class 
    input.css('someStyle');
});

As a side note ids cannot start with numbers.

edited Nov 12, 2010 at 18:20

answered Nov 12, 2010 at 17:59

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

6 Comments

user113716 Over a year ago

Darin - I think for <label> elements, the correct property is this.htmlFor since for is a reserved word.

hunter Over a year ago

can you do this.for? I'm thinking you'd have to write this[0].for

Darin Dimitrov Over a year ago

Because the $() function returns a jquery object. Use this.for to get the id.

Darin Dimitrov Over a year ago

@hunter, no, inside the each callback this points to the current element that's being enumerated. In this case it points to a label. So you don't have this[0].id, nor this.id, you should use this.for as you want the for attribute.

user113716 Over a year ago

@Darin - Your correction will work of course, but I'd still do a direct property access. You just can't use for, but would need to use htmlFor instead. I'm pretty certain that it is widely supported.

|

Adam · Accepted Answer · 2010-11-12 18:03:03Z

1

$(label).attr("for") will return the id of the label, using the attr method. You then want to select the element with that id so: $("#" + $(label).attr("for")) now you have the input element selected. You can change it's style with .css(). For example: $("#" + $(label).attr("for")).css("color", "blue"). To loop through all the labels you can do:

$("label").each(function(){
  $("#" + $(this).attr("for")).css("color", "blue");//note that this refers to the label in this context
});

answered Nov 12, 2010 at 18:03

Adam

45.1k17 gold badges107 silver badges145 bronze badges

Collectives™ on Stack Overflow

Setting an variable using jquery .attr and then changing it

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related