Can't grab value from hidden element <p>For some reason I get a javascript on the following code:</p> <pre><code>var teamOne = ""; var teamTwo = ""; var children = $(this).find(".team-url"); if (children.length === 2) { teamOne = children[0].val(); teamTwo = children[1].val(); } alert(teamOne + " - " + teamTwo); </code></pre> <p>The error is on <code>.val()</code> The code finds 2 elements and then it can't take the value. If I remove <code>.val()</code> I get it saying it is an [Object HTMLInputElement]</p> <p>The error is </p> <blockquote> <p>Uncaught TypeError: children[0].val is not a function</p> </blockquote> <p>Note:</p> <p>I Know that I can get this code to work by doing the following:</p> <pre><code>var teamOne = ""; var teamTwo = ""; var children = $(this).find(".team-url"); if (children.length === 2) { teamOne = children.first().val(); teamTwo = children.last().val(); } alert(teamOne + " - " + teamTwo); </code></pre> <p>However, I am trying to understand why my first version doesn't work so that I can have a better understanding of these functions.</p> <p>EDIT:</p> <p>HTML</p> <pre><code>&lt;div class="col-md-12 game" style="margin-top: 10px"&gt; &lt;div class="team-details"&gt;Team Saturn &lt;input type="hidden" class="team-url" value="TeamSaturn"&gt; &lt;/div&gt; &lt;div class="team-details"&gt;Team Datarnan &lt;input type="hidden" class="team-url" value="TeamDatarnan"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>