Question

I have the following piece of HTML code:

<div class="myclass" id ="class1">
  <ol class="list">
     <li id="li_1">
         <input id="input_1" …>
         <acronym id="input_1" class="classabc">
      </li>
      <li id="li_2">
          <input id="input_2" …>
          <acronym id="input_2" class="classabc">
      </li>
        ....
      <li id="li_n">
          <input id="input_n" …>
          <acronym id="input_n" class="classabc">
      </li>
   </ol>
</div>

Now I want to change the class of some acronym tags, I have the id of an acronym tag, so I tried this:

$('acronym#'+id).removeClass('classabc');
$('acronym#'+id).addClass('newclass');

It didn’t work so I tried:

$('div.myclass ol acronym#'+id).removeClass('classabc');
$('div.myclass ol acronym#'+id).addClass('newclass');

But it still doesn’t work.
I tried alert inside the code, the alert works. I am thinking my selector is not right. So I am asking is there anyway to get correct selector? Or how do I know my selector is correct?

Answer 1

The key problem here: The id attribute MUST be unique for the document. You used the same id attribute several times and this will lead to no (or unpredictable) results using an id selector!