итерация нескольких элементов по нескольким классам в jQuery

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());
        });
    });
});

Fiddle ПРИМЕР: http://jsfiddle.net/raj_er04/DSzjX/

Answer 2

Если у вас есть только одна «реплицируемая» кнопка, вы, вероятно, должны дать ей идентификатор, а не класс для целей выбора, но в любом случае следующее создает обработчик щелчка для этой кнопки, который будет выбирать все входные данные с атрибутом класса, заканчивающимся«_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

Если первый символ имени класса (или идентификатора) является цифрой (как в вашем примере), вам нужно экранировать его ( инструмент ):

$('.\\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());
  });
});