title: Select Elements in nested Divs using JQuery
body: <p>I have the following html markup inside a Div named <code>item</code> and I want to select all the elements (inside nested divs) and clear the values. As shown in following given Jquery I have managed to access elements in each Div by using<code>.children().each()</code>. But the the problem is <code>.children().each()</code>goes one level down at a time from the parent div, so I have repeated the same code block with multiple <code>.children()</code> to access the elements inside nested Divs, can anyone suggest me a method to do this without repeating the code for N number of nested divs .</p>
  
  <p><strong>html markup</strong></p>
  
  <pre><code>&lt;div class="item"&gt;
      &lt;input type="hidden" value="1234" name="testVal"&gt;
  
      &lt;div class="form-group" id="c1"&gt;
          &lt;div class="controls "&gt;
              &lt;input type="text" value="Results" name="s1" maxlength="255" id="id2"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group" id="id4"&gt;
          &lt;input type="text" value="Results" name="s12" maxlength="255" id="id225"&gt;
  
          &lt;div class="form-group" id="id41"&gt;
              &lt;input type="text" value="Results" name="s12" maxlength="255" id="5"&gt;
  
              &lt;div class="form-group" id="id42"&gt;
                  &lt;input type="text" value="Results" name="s12" maxlength="255" id="5"&gt;
  
                  &lt;div class="form-group" id="id43"&gt;
                      &lt;input type="text" value="Results" name="s12" maxlength="255" id="id224"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My Qjuery script</strong></p>
  
  <pre><code>var row = $(".item:first").clone(false).get(0);
  $(row).children().each(function () {
  updateElementIndex(this, prefix, formCount);
  
  if ($(this).attr('type') == 'text') {
      $(this).val('');
  }
  if ($(this).attr('type') == 'hidden' &amp;&amp; ($(this).attr('name') != 'csrfmiddlewaretoken')) {
      $(this).val('');
  }
  if ($(this).attr('type') == 'file') {
      $(this).val('');
  }
  if ($(this).attr('type') == 'checkbox') {
      $(this).attr('checked', false);
  }
  $(this).remove('a');
  });
  
  // Relabel or rename all the relevant bits
  $(row).children().children().each(function () {
  updateElementIndex(this, prefix, formCount)
  
  if ($(this).attr('type') == 'text') {
      $(this).val('');
  }
  if ($(this).attr('type') == 'hidden' &amp;&amp; ($(this).attr('name') != 'csrfmiddlewaretoken')) {
      $(this).val('');
  }
  if ($(this).attr('type') == 'file') {
      $(this).val('');
  }
  if ($(this).attr('type') == 'checkbox') {
      $(this).attr('checked', false);
  }
  $(this).remove('a');
  });
  </code></pre>