Question

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

我想遍历每个 .fact 类，然后获取每个输入类型=文本

的值

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

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

Answer 1

输入元素具有类.fact。您可以通过修改选择器来简单地迭代具有类.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());
 });

Answer 2

班级.fact在你的标记中被过度使用;目前尚不清楚您是指div.fact还是input.fact。还有另一个可能引起混淆的课程：input.Fact。所以我提供了一种可行的方法来解决这个问题：

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

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

$('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>

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

2 个答案: