从具有相同类的多个div获取输入字段的值

Question

我试图在具有相同类名的3个不同div中获取输入字段的值。以下是代码：

＆＃13;

＆＃13;

$('.resultsbtn').click(function() {
    $('.items-block').each(function() {

        var text1 = $(this).('.text1').val();
        var text2 = $(this).('.text2').val();
        var text3 = $(this).('.text3').val();

       code = ' | '+ text1 +', '+ text2 +', '+ text3;
    });
    
    $('.results > span').html( code );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">The Results are: <span></span></div>

<div class="items-block">
    <label for="text1">Text 1: </label><input name="text1" type="text" class="text1" value=""/>
    <label for="text2">Text 2: </label><input name="text2" type="text" class="text2" value=""/>
    <label for="text1">Text 3: </label><input name="text3" type="text" class="text3" value=""/>
</div>
<div class="items-block">
    <label for="text1">Text 1: </label><input name="text1" type="text" class="text1" value=""/>
    <label for="text2">Text 2: </label><input name="text2" type="text" class="text2" value=""/>
    <label for="text1">Text 3: </label><input name="text3" type="text" class="text3" value=""/>
</div>
<div class="items-block">
    <label for="text1">Text 1: </label><input name="text1" type="text" class="text1" value=""/>
    <label for="text2">Text 2: </label><input name="text2" type="text" class="text2" value=""/>
    <label for="text1">Text 3: </label><input name="text3" type="text" class="text3" value=""/>
</div>

<button class="resultsbtn">View Results</button>

＆＃13;

＆＃13;

＆＃13;

这只返回第一个div的值，而它应该以{{1​​}}的格式返回所有三个div的值。最后两个div实际上是第一个div的克隆，但是真的很重要，因为我在DOM中克隆并加载了div之后获得了click上的值。

我做错了什么？

Answer 1

首先，你需要声明并初始化一个可以在循环内添加的循环外的变量，因此var code = '';。否则，您可能会在循环中声明变量的范围问题。

其次，当你写$(this).('.text1').val()时，你可能想写$(this).find('.text1').val();而$(this).('.text1').val()没有意义。

最后，为了不覆盖您想要使用+=而不是=的变量中的值。换句话说：code = code + ...代替code = ....。

＆＃13;

＆＃13;

$('.resultsbtn').click(function() {
    //Declare and initialize variable
    var code = '';
    $('.items-block').each(function() {
        //get values
        var text1 = $(this).find('.text1').val();
        var text2 = $(this).find('.text2').val();
        var text3 = $(this).find('.text3').val();
        //append values to previous to variable -- +=
        code += ' | '+ text1 +', '+ text2 +', '+ text3;
    });
    //output result
    $('.results > span').html( code );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">The Results are: <span></span></div>

<div class="items-block">
    <label for="text1">Text 1: </label><input name="text1" type="text" class="text1" value=""/>
    <label for="text2">Text 2: </label><input name="text2" type="text" class="text2" value=""/>
    <label for="text1">Text 3: </label><input name="text3" type="text" class="text3" value=""/>
</div>
<div class="items-block">
    <label for="text1">Text 1: </label><input name="text1" type="text" class="text1" value=""/>
    <label for="text2">Text 2: </label><input name="text2" type="text" class="text2" value=""/>
    <label for="text1">Text 3: </label><input name="text3" type="text" class="text3" value=""/>
</div>
<div class="items-block">
    <label for="text1">Text 1: </label><input name="text1" type="text" class="text1" value=""/>
    <label for="text2">Text 2: </label><input name="text2" type="text" class="text2" value=""/>
    <label for="text1">Text 3: </label><input name="text3" type="text" class="text3" value=""/>
</div>

<button class="resultsbtn">View Results</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用find()搜索并检索输入。

此外，定义each范围之外的代码。

最后请注意，您的初始实现仅适用于最后一组输入框，因为迭代会将单数结果元素设置为最后一个输入值。

要克服，为每个组制作一组result元素，然后您可以在each本身内设置结果

$('.resultsbtn').click(function() {

        $('.items-block').each(function() {

            var text1 = $(this).find('.text1').val();
            var text2 = $(this).find('.text2').val();
            var text3 = $(this).find('.text3').val();

           var code = ' | '+ text1 +', '+ text2 +', '+ text3;
           $(this).find('.results > span').html( code );
        });


    });

＆＃13;

＆＃13;

$('.resultsbtn').click(function() {
   
        $('.items-block').each(function() {
    
            var text1 = $(this).find('.text1').val();
            var text2 = $(this).find('.text2').val();
            var text3 = $(this).find('.text3').val();
    
           var code = ' | '+ text1 +', '+ text2 +', '+ text3;
           $(this).find('.results > span').html( code );
        });
    
       
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="items-block">
  <div class="results">The Results are: <span></span></div>
    <label for="text1">Text 1: </label><input name="text1" type="text" class="text1" value=""/>
    <label for="text2">Text 2: </label><input name="text2" type="text" class="text2" value=""/>
    <label for="text1">Text 3: </label><input name="text3" type="text" class="text3" value=""/>
</div>
<div class="items-block">
  <div class="results">The Results are: <span></span></div>
    <label for="text1">Text 1: </label><input name="text1" type="text" class="text1" value=""/>
    <label for="text2">Text 2: </label><input name="text2" type="text" class="text2" value=""/>
    <label for="text1">Text 3: </label><input name="text3" type="text" class="text3" value=""/>
</div>
<div class="items-block">
  <div class="results">The Results are: <span></span></div>
    <label for="text1">Text 1: </label><input name="text1" type="text" class="text1" value=""/>
    <label for="text2">Text 2: </label><input name="text2" type="text" class="text2" value=""/>
    <label for="text1">Text 3: </label><input name="text3" type="text" class="text3" value=""/>
</div>

<button class="resultsbtn">View Results</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

$('.resultsbtn').click(function() {
     var code = '';
     $('.items-block').each(function() {

        var text1 = $(this).find('.text1').val();
        var text2 = $(this).find('.text2').val();
        var text3 = $(this).find('.text3').val();

       code = ' | '+ text1 +', '+ text2 +', '+ text3;
    });

    $('.results > span').html( code );
});

输入是在.items-block

Answer 4

您必须在code循环之外声明each变量才能在span元素中显示它。此外，您需要在每个div中选择input:text。

试试这个：

   $('.resultsbtn').click(function () {
   var code = "";   // <-----
   $('.items-block input:text').each(function () {

       var text1 = $(this).val();
       var text2 = $(this).val();
       var text3 = $(this).val();

       code += ' | ' + text1 + ', ' + text2 + ', ' + text3;
   });

   $('.results > span').html(code);
});

fiddle