Note that there are some explanatory texts on larger screens.

plurals
  1. POSelecting by element ID + element class yields same element twice
    text
    copied!<p>Why is jQuery returning same element twice here?</p> <p>Checked the HTML numerous times, there's only one <code>&lt;div&gt;</code> with <code>id="3"</code> and <code>class="password_field_real"</code>.</p> <p>This is the result for getting all elements with <code>class="password_field_real"</code>:</p> <pre><code>&gt; $(".password_field_real") [ &lt;div class="password_field_real" id="2" style="display: none;"&gt;&lt;/div&gt;, &lt;div class="password_field_real" id="3" style="display: none;"&gt;&lt;/div&gt;, &lt;div class="password_field_real" id="7" style="display: none;"&gt;&lt;/div&gt;, ] </code></pre> <p>However, when I try to get <code>class="password_field_real"</code> and <code>id="3"</code>, I get a list of two divs, which are the same!</p> <pre><code>&gt; $("#3.password_field_real") [ &lt;div class="password_field_real" id="3" style="display: none;"&gt;&lt;/div&gt;, &lt;div class="password_field_real" id="3" style="display: none;"&gt;&lt;/div&gt; ] </code></pre> <p>This is not the case with other two divs:</p> <pre><code>&gt; $("#7.password_field_real") [ &lt;div class="password_field_real" id="7" style="display: none;"&gt;&lt;/div&gt; ] </code></pre> <p>Why could this happen?</p> <p><strong>* UPDATE *</strong></p> <p><a href="http://jsfiddle.net/SdfCC/" rel="nofollow" title="Reproduced">Reproduced</a> this in jsFiddle</p> <p><strong>* UPDATE #2 *</strong></p> <p>If non-numeric ID's are used, everything <a href="http://jsfiddle.net/Fmfjn/" rel="nofollow">works just fine</a>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload