在javascript中通过id调用元素

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?

Answer 1

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');

Answer 2

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 .

Answer 3

尝试这个：

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