Question

我正在尝试迭代3个表单，其中包含不同数量的输入框。在每个表单中，输入字段具有相同的类。我需要做的是，有一个“复制”按钮，这样当按下它时，它将复制一个字段的输入并将其复制到每个字段。以下是目前设置的方式：

<input type="button" class="replicate" />

<form class="1">
  <input class="1_size" /> <!--this is the one I want to copy to all other fields -->
</form>
<form class="1">
  <input class="1_size" />
</form>

<form class="2">
  <input class="2_size" />
</form>
<form class="2">
  <input class="2_size" />
</form>
<form class="2">
  <input class="2_size" />
</form>

<form class="3">
 <input class="3_size" />
</form>
<form class="3">
  <input class="3_size" />
</form>

所以我需要做的[当按下复制按钮时]是迭代每个表单并使用第一个表单中的输入（请参阅注释）并将其复制到所有其他表单中的所有其他输入。这甚至可能吗？存在具有相同类和输入的表单的原因是因为它们具有"+"和"-"按钮

我正在使用jQuery库，我想我可以做类似的事情：

$(document).ready(function() {
    $('.1, .2, .3').each(function() {

    });
});

我可以使用.parents()或parent()之类的内容吗？我有点陷入困境，甚至不确定你是否可以使用这样的each() ...希望我已经解释得很好了！

Answer 1

尝试下面的内容，我认为input type是text

$(document).ready(function() {
    $('input.replicate').click(function(){    
        var first_form = $('form:first');        
        $('form').not(first_form).each(function(){
          $(this).children('input:text').val(first_form.children('input:text').val());
        });
    });
});

小提琴示例：http://jsfiddle.net/raj_er04/DSzjX/

Answer 2

如果你只有一个“复制”按钮，你可能应该给它一个id而不是一个类用于选择目的，但无论如何，下面为该按钮创建了一个单击处理程序，它将选择具有以类结尾的类属性的所有输入除了第一个之外的“_size”，并从第一个值中分配值：

$(document).ready(function(){
    $("input.replicate").click(function() {
        var inputs = $('input[class$="_size"]');
        inputs.not(":first").val( inputs.first().val() );
    });
});

演示：http://jsfiddle.net/2bceZ/

请注意，如果有多个类分配给输入，我使用的选择器将无法工作 - 在您的示例中没有，但当然可能在成品中 - 所以您可能希望做这样的事情：

var inputs = $(".1,.2,.3").find("input");

Answer 3

如果类名（或ID）的第一个字符是数字（如示例所示），则需要escape it（tool）：

$('.\\31 '); // will select the element(s) with class="1"
$('.\\31 _size'); // will select the element(s) with class="1_size"

那就是说，dku.rajkumar的回答有一个很好的解决方案：

$('input.replicate').click(function() {    
  var $firstForm = $('form').first();
  $('form').not($firstForm).each(function() {
    $('input:text', this).val($('input:text', $firstForm).val());
  });
});

在jQuery中迭代多个类的多个元素

3 个答案: