クラスまたはIDなしで次の入力フィールドを設定する方法

Question

私はJQueryとJavascriptの初心者です。私は（DataTablesプラグインを使用して）動的に作成され、6列と0以上の行を持つテーブルを持っています。最初の4つの列には、2つのドロップダウンメニューと2つの入力フィールドがあります。私は、対応するドロップダウンメニューで選択したものに基づいて、次の入力フィールドの値を設定しようとしています。

次の例では、最初のドロップダウンにSite1とSite2の2つの値があります。ユーザーがSite2を選択すると、onchangeイベントが発生し、関数getSiteObjects（）は次の入力フィールドに値を設定します。私はどのドロップダウンメニューを選択しているのかわかりませんが、次のフォームフィールドが設定したい入力フィールドになることはわかります。次の入力フィールドを設定するにはどうしたらいいですか？

HTMLのスニペット：

<tr class="customizationRow odd" role="row"> 
    <td class="sourceSiteCell"> 
     <div class="form-group"> 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
       <option class="option"/> 
       <option class="option">Site1</option> 
       <option class="option">Site2</option> 
      </select> 
     </div> 
    </td> 
    <td class="sourceObjectCell"> 
     <input class="form-control user-input" type="text" value=""> 
    </td> 
    <td class="targetSiteCell"> 
     <div class="form-group"> 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
       <option class="option"/> 
       <option class="option">Site1</option> 
       <option class="option">Site2</option> 
      </select> 
     </div> 
    </td> 
    <td class="targetObjectCell"> 
     <input class="form-control user-input" type="text" value=""> 
    </td> 
<!-- More of the same code for the other columns --> 
</tr> 

JavaScriptの機能：

function getSiteObjects(select) { 
    var selectedSite = select.value; // Gets the value selected 

    <!-- Make an ajax call to get the value from a REST service --> 
    $(this).next('input').val("Hello1"); // Doesn't work 
    $(this).find('input').val("Hello2"); // Doesn't work 
    // select.next('input').val("Hello3"); // Doesn't work 
} 

私は私の問題のjsFiddleのデモを作成しました：jsFiddle Demo

Answer 1

$()はjQueryコンストラクタ関数です。

は、呼び出しのDOM要素への参照です。

はとても基本的に、$(this)に、あなたはjQueryのメソッドや関数を呼び出すことができるようにパラメータとして$()にthis（あなたの場合には受信したパラメータselect）を渡す必要があります。

function getSiteObjects(select) { 
 
    var _this = $(select); 
 
    _this.closest('td').next('td').find('input').val(_this.val()); 
 
}

.console-line 
 
{ 
 
    font-family: monospace; 
 
    margin: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-hover"> 
 
<tr> 
 
    <th>Source Site</th> 
 
    <th>Source Object</th> 
 
    <th>Target Site</th> 
 
    <th>Target Object</th> 
 
</tr> 
 
<tr class="customizationRow odd" role="row"> 
 
    <td class="sourceSiteCell"> 
 
     <div class="form-group"> 
 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
 
       <option class="option"/> 
 
       <option class="option">Site1</option> 
 
       <option class="option">Site2</option> 
 
      </select> 
 
     </div> 
 
    </td> 
 
    <td class="sourceObjectCell"> 
 
     <input class="form-control user-input" type="text" value=""> 
 
    </td> 
 
    <td class="targetSiteCell"> 
 
     <div class="form-group"> 
 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
 
       <option class="option"/> 
 
       <option class="option">Site1</option> 
 
       <option class="option">Site2</option> 
 
      </select> 
 
     </div> 
 
    </td> 
 
    <td class="targetObjectCell"> 
 
     <input class="form-control user-input" type="text" value=""> 
 
    </td> 
 
<!-- More of the same code for the other columns --> 
 
</tr> 
 
</table>

Answer 2

あなたが要素をターゲットに間違った選択を持っています。入力要素を見つけるために.find()方法と共に.next()

3）を用いて次のTDに続いて）あなたは.closest('.targetSiteCell')

2を使用して、クラスtargetSiteCellと親td要素を横断する必要がある、入力に

1）を標的化するためin td：

$(this).closest('.targetSiteCell').next().find('input').val("Hello1");