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

我有一个类似于下面的html结构

<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>

---

运行上面的代码给了我一个未定义的错误，我如何在所有.facts中运行一个循环，然后获取输入[type=text]的值；我需要能够以这种方式准确地获取它，因为我将在每个div中添加更多的输入字段。

输入元素具有class

。fact

。通过修改选择器，可以使用class

.fact

简单地迭代输入元素：

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

对于在div元素上迭代：

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

---

类

.fact

在标记中被过度使用；不清楚您所指的是

div.fact

还是

input.fact

。还有另一个类可能会引起混淆：

input.Fact

。因此，我提供了一种可能的方法：

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

当然，如果没有事件，这个代码片段是无用的。例如，您可能有一个按钮，在用户提供输入后，用户将单击该按钮以启动此代码段，如下所示：

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

$（'div.fact'）。每个（函数（）{
log（$（':text'，this.val（））；
});
您所说的“未定义错误”是什么意思？你能提供一把小提琴吗？
$('button').on('click', function() {
   //above code
});