title: Run .each loop to get value of contents inside divs
body: <p>I have an html structure similar to the one below </p>
  
  <pre><code>&lt;div id="factsParent" class="col-md-12"&gt;
  &lt;div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body"&gt;
      &lt;div class="form-group col-md-10"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="box-wrap"&gt;
                  &lt;input type="text" name="fact" placeholder="Enter a Fact" value="" class="fact form-control fact-title"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body"&gt;
      &lt;div class="form-group col-md-10"&gt;          
          &lt;div class="col-md-12"&gt;
              &lt;div class="box-wrap"&gt;
                  &lt;input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="" class="fact form-control fact-title"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;       
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I would like to loop through each of the <strong>.fact</strong> classes and then get the value of each <strong>input type=text</strong> </p>
  
  <pre><code>  $('.fact').each(function(i){ 
                 console.log(this.$('input[name=fact]').val());
  });
  </code></pre>
  
  <p>Running the code above gave me an undefined error, how would I run a loop through all .facts and then get value of the input[type=text]; I need to be able to get it exactly in this manner as I would be adding more input fields inside each div.</p>