title: Access asp element in a repeater via javascript
body: <p><strong>The Scenario:</strong> </p>
  
  <p>I have a form in which I register people. I have a button "Add more people". The repeater has ran 4 times on Page_Load and all the controls is already on the page(they are just hidden). When I click the button I find the first hidden <code>div</code> and just show it. </p>
  
  <p><strong>The Problem:</strong> </p>
  
  <p>Now I need to do stuff with a speciffic element in a speciffic div generated by the repeater (for example change it's class). However I don't know how to access it. Access by Id doesn't work and neither does access by class. I can't do anything from the code behind becaus everything is already on the page. It has to be done in javascript. Any ideas?</p>
  
  <p><strong>The code:</strong></p>
  
  <pre><code>&lt;asp:Repeater ID="rptOtherPeople" runat="server"&gt;
          &lt;HeaderTemplate&gt;
                   &lt;h3&gt;Other people&lt;/h3&gt;
          &lt;/HeaderTemplate&gt;
          &lt;ItemTemplate&gt;
              &lt;div class="GridRow" id="personRow" style="display: none"&gt;           
                      &lt;dl&gt;
                          &lt;dt class="form-lbl left"&gt;Name&lt;/dt&gt;
                          &lt;dd class="form-value left"&gt;
                              &lt;asp:TextBox ID="txtFirstName" CssClass="mid-inp required" Text="" runat="server"&gt;&lt;/asp:TextBox&gt;
                          &lt;/dd&gt;
                      &lt;/dl&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;div class="separator"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/ItemTemplate&gt;
          &lt;FooterTemplate&gt; &lt;/FooterTemplate&gt;
      &lt;/asp:Repeater&gt;
  </code></pre>
  
  <p>The javascript that shows the next row:</p>
  
  <pre><code> var peopleNum = 1;
  $(document).ready(function () {
      for (i = 0; i &lt; peopleNum; i++) {
          $(".GridRow").each(function (index) {
              if (index == i)
                  $(this).show();
          });
      }
  })
  
  function addPerson() {
      peopleNum++;
      $(".GridRow").each(function (index) {
          if (index == peopleNum-1)
              $(this).show();
      });
  }
  </code></pre>