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

I'm trying to iterate over 3 forms, which contain a varying number of input boxes. Within each form, the input fields have the same class. What I need to do, is have a "replicate" button so that when this is pressed, it will copy the input from one field and copy it over to each one. Here is how things are currently setup:

我正在尝试迭代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>

So what I need to do [when the replicate button is pressed] is to iterate over each form and use the input from the first one (see the comment) and copy it to all the other inputs in all the other forms. Is this even possible? The reason that there are forms with same classes and inputs is because they have a "+" and "-" button

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

I'm using the jQuery library and I'm thinking I can do something like:

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

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

    });
});

Could I then use something like .parents() or parent()? I'm a little stuck and not even sure if you can use an each() like this...hope I've explained this well!

我可以使用.parents()或parent()之类的东西吗?我有点陷入困境,甚至不确定你是否可以像这样使用每个()...希望我已经解释得很好!

3 个解决方案

#1

If you only have one "replicate" button you should probably give it an id rather than a class for selection purposes, but anyway, the following creates a click handler for that button which will select all inputs with a class attribute ending in "_size" except the first one, and assign the value from the first one:

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

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

Demo: http://jsfiddle.net/2bceZ/

Note that the selector I've used won't work if there are multiple classes assigned to the inputs - which there aren't in your example, but of course there could be in the finished product - so you might like to do something like this:

请注意,如果有多个类分配给输入,我使用的选择器将不起作用 - 在您的示例中没有,但当然可能在最终产品中 - 所以您可能想要做类似的事情这个:

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

#2

try something like below, i consider that input type is 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());
        });
    });
});

Fiddle EXAMPLE : http://jsfiddle.net/raj_er04/DSzjX/

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

#3

If the first character of a classname (or ID) is a digit (like in your example), you’ll need to escape it (tool):

如果类名(或ID)的第一个字符是数字(如示例所示),则需要将其转义(工具):

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

That said, dku.rajkumar’s answer had a good solution:

也就是说,dku.rajkumar的答案有一个很好的解决方案:

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

#1

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