Call element by id in javascript

Question

I have a repeater and have a label with an icon inside it.

 <strong><i id="iconProperties" class="icon-caret-right"></i>&nbsp;Properties</strong>

When i click a button the icon-caret-right must be turned to icon-caret-down. i have written the code as follows:

 $('#iconProperties').removeClass('icon-caret-right').addClass('icon-caret-down');

When i use this code only the first row of the repeater is working. all other rows's icons are not changing. What is the mistake?

As in `id="iconProperties"`. Are there multiple elements that have the exact same id in the generated HTML code that are sent to the browser? — some, Dec 17 '13 at 06:07

score 4 · Accepted Answer · answered Dec 17 '13 at 06:04

4

ASP.net generates unique ids for html elements and only one element can have id iconProperties that you used in selector. You can use Attribute Contains Selector [name*="value"] instead of id selector to get all the matching elements.

$('[id*=iconProperties]').removeClass('icon-caret-right').addClass('icon-caret-down');

answered Dec 17 '13 at 06:04

Adil

146,340
25
209
204

1

ya. this will work. but anyone can plz explain the diff between [id*=iconProperties] and [id^=iconProperties] to understand better. – sms Dec 17 '13 at 06:11
1

id* is for contains and id^ is for starts with – Adil Dec 17 '13 at 06:12
1

How to find the same element using document.getelementbyid instead of $ ? – Wilson Dec 27 '13 at 08:58
This will give you an idea, http://stackoverflow.com/questions/17452205/how-to-retrieve-all-td-where-the-id-begin-by-td-in-javascript/17452224#17452224 – Adil Dec 27 '13 at 10:07

score 3 · Answer 2 · answered Dec 17 '13 at 06:08

If your ids have a similar name, you're probably after something like $('[id^=iconProperties]').removeClass('icon-caret-right').addClass('icon-caret-down');
Which will update all items beginning with id "iconProperties".

It might be worth noting that it is common practice to use unique ids.

score 1 · Answer 3 · answered Dec 17 '13 at 06:09

1

Try this:

$('#iconProperties').find('.icon-caret-right').replaceWith('.icon-caret-down');

answered Dec 17 '13 at 06:09

Mr.G

3,413
2
16
20

Call element by id in javascript

3 Answers3