1つの入力から2番目の入力に値をコピーし、それぞれの関数で2番目の入力にコピーする

Question

誰かが1つのテキスト入力に入力して2番目の入力にコピーしようとしています。私はこれを達成することができます、私の問題はそれぞれの機能です。これら2つの入力フィールド（横並び）は、2回連続して繰り返され、行ごとに異なる値を持つ必要があります。あなたは私の問題をフィドルで見ることができます。

ここではいくつかのサンプルコードです：

HTML：

<div class="media"> 
    <div class="row"> 
     <div class="input-holder-one"> 
      <input type="text"> 
     </div> 
     <div class="input-holder-two"> 
      <input type="text"> 
     </div> 
    </div> 
</div> 
<div class="media"> 
    <div class="row"> 
     <div class="input-holder-one"> 
      <input type="text"> 
     </div> 
     <div class="input-holder-two"> 
      <input type="text"> 
     </div> 
    </div> 
</div> 

jQueryの

jQuery(function ($) { 
    $('.media .row').each(function(){ 

     $(this).find('.input-holder-one input').on('keyup', function(){ 
      $('.input-holder-two input').val($('.input-holder-one input').val()); 
     }); 
    }); 
}); 

がここにjsfiddleです：

https://jsfiddle.net/p37s6k3c/

Answer 1

ここでの問題は、セレクタ$('.input-holder-two input')だけを使用して、.val()をオンにすると、最初の要素のvalueが一致するようになります（はセレクタが多くの要素を取得するため）。これを解決するには、イベントハンドラをアタッチして目的の要素を取得するのと同様に$(this).find()を使用します。

あなたは、イベントハンドラを添付のと同じ方法でそれらの要素を取得するために$(this).find(..)を使用することができます。

$('.media .row').each(function(){ 
    var $holderOne = $(this).find('.input-holder-one input'); 
    var $holderTwo = $(this).find('.input-holder-two input'); 
    $holderOne.on('keyup', function(){ 
     $holderTwo.val($holderOne.val()); 
    }); 
}); 

Fiddle

Answer 2

それが悪いあなたのセレクタです。 .rowの入力を見つける必要があります。

jQuery(function ($) { 
 
    $(".input-holder-one>input").keyup(function(e){ 
 
     var $this = $(this); 
 
     $this.parents(".row").find(".input-holder-two>input").val($this.val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="media"> 
 
    <div class="row"> 
 
     <div class="input-holder-one"> 
 
      <input type="text"> 
 
     </div> 
 
     <div class="input-holder-two"> 
 
      <input type="text"> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="media"> 
 
    <div class="row"> 
 
     <div class="input-holder-one"> 
 
      <input type="text"> 
 
     </div> 
 
     <div class="input-holder-two"> 
 
      <input type="text"> 
 
     </div> 
 
    </div> 
 
</div>