运行.each循环以获取divs中内容的值

Question

I have an html structure similar to the one below

<div id="factsParent" class="col-md-12">
<div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
    <div class="form-group col-md-10">
        <div class="col-md-12">
            <div class="box-wrap">
                <input type="text" name="fact" placeholder="Enter a Fact" value="" class="fact form-control fact-title">
            </div>
        </div>
    </div>
</div>
<div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
    <div class="form-group col-md-10">          
        <div class="col-md-12">
            <div class="box-wrap">
                <input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="" class="fact form-control fact-title">
            </div>
        </div>
    </div>       
</div>

I would like to loop through each of the .fact classes and then get the value of each input type=text

  $('.fact').each(function(i){ 
               console.log(this.$('input[name=fact]').val());
});

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.

Answer 1

input elements has class .fact . you can simple iterate over input elements with class .fact by modifying the selector:

 $('input.fact').each(function(i){ 
     console.log($(this).val());//or this.value
 });

for iterating over div elements:

 $('div.fact').each(function(i){ 
     console.log($(this).find('input').val());
 });

Answer 2

The class .fact is quite overused in your markup; it is not clear whether you're referring to div.fact or input.fact . And there's another class that might cause confusion: input.Fact . So I have provided one of the possible ways you can approach this:

$('div.fact').each(function() {
    console.log( $(':text', this).val() );
});

Of course , this code snippet is useless without an event. For example you may have a button which after the user has provided input the user would then click the button to fire up this code snippet as follows:

$('button').on('click', function() {
   //above code
});

 $('div.fact').each(function() { console.log( $(':text', this).val() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="factsParent" class="col-md-12"> <div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body"> <div class="form-group col-md-10"> <div class="col-md-12"> <div class="box-wrap"> <input type="text" name="fact" placeholder="Enter a Fact" value="Test 1" class="fact form-control fact-title"> </div> </div> </div> </div> <div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body"> <div class="form-group col-md-10"> <div class="col-md-12"> <div class="box-wrap"> <input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="Test 2" class="fact form-control fact-title"> </div> </div> </div> </div>