Issue with changing an attribute with jquery

Question

I'm having an issue with changing the attribute for an id and can't seem to figure out what I'm doing wrong. I guess it doesn't help that I'm new to this also.

I have a function that tests to make sure that I am pulling the correct id from the row in my form that I have dynamically created. It goes something like this:

myFunction() {
  var id = $(id).attr("id");
  alert("This is my id " + id);
}

This works with no problem and when I click the button assigned to alert me of my id it will give me the id of the dynamic row in my form. The issue is now when I try to change the id with this:

changeId() {
  var newId = $(id).attr("id", "x");
  alert("This is my new id " + newId);
}

What happens in this case is that it will alert saying "This is my new id [object Object]" instead of giving me the new id. Any suggestions? I'd really appreciate any help with this.

Those examples seem incomplete. They are missing the function keyword and the variable id is undefined. Also — RoToRa
– RoToRa, Commented May 20, 2010 at 13:44

Nick Craver · Accepted Answer · 2010-05-20 13:51:54Z

5

.attr(attribute, value) returns the jQuery object again (so you can keep chaining), if you want that assigned ID, you need to do this:

changeId() {
  var newId = $(id).attr("id", "x").attr("id");
  alert("This is my new id " + newId);
}

Though the direct route is much better, for example:

changeId() {
  var newId = "x"
  $(id).attr("id", newId);
  alert("This is my new id " + newId);
}

edited May 20, 2010 at 13:51

answered May 20, 2010 at 13:42

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

3 Comments

Andy E Over a year ago

+1 for this. Took the most effort to write and you even fetched the link and still managed to only be 3 seconds short of first :-)

Matt Ball Over a year ago

Nick, why are you capturing newId in your revised changeId()? This would make a lot more sense to me: changeId() { var newId = 'x'; $(id).attr('id', newId); alert('This is my new id ' + newId); }

rshivers Over a year ago

Thanks Nick and everyone who answered, it does exactly what I needed to do!

karim79 · Accepted Answer · 2010-05-20 13:42:39Z

1

You are setting, and not getting.The jQuery object is returned when you use .attr to set an attribute - not the value you have set it to. Try:

changeId() {
  $(id).attr("id", "x");
  var id = $(id).attr("id");
  alert("This is my new id " + newId);
}

answered May 20, 2010 at 13:42

karim79

343k67 gold badges420 silver badges409 bronze badges

Comments

Tomalak · Accepted Answer · 2010-05-20 13:42:43Z

1

attr(name, value) returns a jQuery object. This is to support jQuery method chaining.

You want

changeId() {
  // ------------------------------v method chaining!
  var newId = $(id).attr("id", "x").attr("id");
  alert("This is my new id " + newId);
}

or simply

changeId() {
  $(id).attr("id", "x");
  alert("This is my new id " + id.id);
}

Maybe you also find a nicer name for the variable than id.

answered May 20, 2010 at 13:42

Tomalak

340k68 gold badges547 silver badges635 bronze badges

Comments

user113716 · Accepted Answer · 2010-05-20 13:43:17Z

1

Running .attr() with one argument returns the value of the attribute.

Running .attr() with two arguments returns the jQuery object against which it was called.

Docs: http://api.jquery.com/attr/

answered May 20, 2010 at 13:43

user113716

323k64 gold badges454 silver badges441 bronze badges

Comments

RoToRa · Accepted Answer · 2010-05-20 13:44:08Z

1

attr when used to set an attribute returns the original jQuery object not the new attribute value.

answered May 20, 2010 at 13:44

RoToRa

38.5k12 gold badges73 silver badges110 bronze badges

Comments

Tim Down · Accepted Answer · 2010-05-20 14:08:00Z

1

Just change the id property of the DOM node. Works in all browsers and couldn't be simpler:

var el = document.getElementById("your_id");
el.id = "new_id";
alert(el.id);

answered May 20, 2010 at 14:08

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Collectives™ on Stack Overflow

Issue with changing an attribute with jquery

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related