title: JavaScript access child element within forEach loop
body: <p>I'm just starting out with JavaScript although I have used a number of other languages previously.  I'm finding the orientation pretty painful and I'd appreciate some guidance on how to access child elements within a forEach loop (or a jQuery .each loop).  At this stage I don't really care whether the solution is JS or jQuery, I'm just trying to get something that works.</p>
  <p>Say I have a node element that I have found using jQuery and I now have some processing to do on each row, which includes needing to find a child-element whose id contains an index related to the parent node in question:</p>
  <pre><code>$('.row').each((index, item) =&gt; {
      var name = item.getElementById(`#name-${index}`);
  });
  </code></pre>
  <p>It seems that it should be straightforward to select the element using getElementById, but this results in an 'item.getElementById is not a function' error.</p>
  <p>I've also tried a jQuery approach:</p>
  <pre><code>var name = item.find('#name-0')
  </code></pre>
  <p>this gets an 'item.find is not a function' error.</p>
  <p>I don't know if item should be in {} - it's not clear to me when the braces are needed and when they are not, but if I try it with the braces I still get a '.find is not a function' error.</p>
  <p>Can someone point out what I'm doing wrong, or even better point me in the right direction of somewhere this is documented.  All I can find is very simplistic examples.</p>
  <p>Edited to include minimal HTML example:
  (and amended to fix missing div tags)</p>
  <pre><code>&lt;div id=&quot;container&quot; class=&quot;position-relative col-10&gt;
  
      &lt;div id=&quot;row-0&quot; class=&quot;row position-relative&quot;&gt;
          &lt;div id=&quot;name-0&quot; class=&quot;column col-4&quot;&gt;User 1&lt;/div&gt;
          &lt;div id=&quot;score-0&quot; class=&quot;column col-2&quot;&gt;20&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id=&quot;row-1&quot; class=&quot;row position-relative&quot;&gt;
          &lt;div id=&quot;name-1&quot; class=&quot;column col-4&quot;&gt;User 2&lt;/div&gt;
          &lt;div id=&quot;score-1&quot; class=&quot;column col-2&quot;&gt;10&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id=&quot;row-2&quot; class=&quot;row position-relative&quot;&gt;
          &lt;div id=&quot;name-2&quot; class=&quot;column col-4 &quot;&gt;User 3&lt;/div&gt;
          &lt;div id=&quot;score-2&quot; class=&quot;column col-2&quot;&gt;5&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>