jQuery如何将行输入值复制到隐藏字段中？

Question

我有一个简单的要求，我正在为此苦苦挣扎。

[当用户单击行按钮时，有多行具有输入和隐藏字段，我需要从输入中获取值并使用它来设置当前行的隐藏字段。

所以：

 if user clicks on row 1 - take input text from row 1 and set it in hidden of row 1
 if user clicks on row 2 - take input text from row 2 and set it in hidden of row 2   
 ...
 if user clicks on row n - take input text from row n and set it in hidden of row n  

这是我到目前为止尝试过的：

$( document ).ready(function() {
    $(".copyVal").click(function() {
       var inputValue = $(this).parent().find("input.inpClass:text").val();
       console.log("Input Value is:" + inputValue);
          
       var currentRowHidden = $(this).parent().find("[id^='hidden_']");
       console.log("current hidden id to set is:" + $(currentRowHidden).attr('id') );
       $(currentRowHidden).val(inputValue);          
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


ROW1:
<div class="form-group row">
  <input type="text" class="inpClass" value="ROW1"/>
  <div class="col-xs-1">
    <button class="btn btn-primary copyVal"><i class="fa fa-arrows-alt">Button1</i></button>
  </div>
  <input type="hidden"  id="hidden_1" name="hidden_1" value="">
</div>


ROW2:
<div class="form-group row">
   <input type="text" class="inpClass" value="ROW2"/>
   <div class="col-xs-1">
     <button class="btn btn-primary  copyVal"><i class="fa fa-arrows-alt">Button2</i></button>
   </div>
   <input type="hidden"  id="hidden_2" name="hidden_2" value="">
</div>
  
ROW3:
<div class="form-group row">
  <input type="text" class="inpClass" value="ROW3"/>
  <div class="col-xs-1">
     <button class="btn btn-primary  copyVal"><i class="fa fa-arrows-alt">Button3</i></button>
  </div>
  <input type="hidden"  id="hidden_3" name="hidden_3" value="">
</div>

Answer 1

您正在使用.parent()选择器，它将返回直接父级，并且button的直接父级中没有任何隐藏字段。

您需要使用.parents()选择器来搜索祖先元素，而不仅仅是直接父元素。

这里是文档：.parents .parent

我已如下更改您的代码段，以使用.parents选择器：

$( document ).ready(function() {
    $(".copyVal").click(function() {
          var inputValue = $(this).parents("div.row").find("input.inpClass:text").val();
          console.log("Input Value is:" + inputValue);
          
          var currentRowHidden = $(this).parents("div.row").find("[id^='hidden_']");
          console.log("current hidden id to set is:" + $(currentRowHidden).attr('id') );
          $(currentRowHidden).val(inputValue);          
          
          }
         );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


ROW1:
<div class="form-group row">
          <input type="text" class="inpClass" value="ROW1"/>
          <div class="col-xs-1">
				<button class="btn btn-primary copyVal">
						<i class="fa fa-arrows-alt">Button1</i>
   					</button>
		  </div>
          <input type="hidden"  id="hidden_1" name="hidden_1" value="">
   	</div>

ROW2:
<div class="form-group row">
          <input type="text" class="inpClass" value="ROW2"/>
          <div class="col-xs-1">
				<button class="btn btn-primary  copyVal">
					<i class="fa fa-arrows-alt">Button1</i>
				</button>
  			  </div>
          <input type="hidden"  id="hidden_2" name="hidden_2" value="">
   	</div>

ROW3:
 <div class="form-group row">
          <input type="text" class="inpClass" value="ROW3"/>
          <div class="col-xs-1">
				<button class="btn btn-primary  copyVal">
					<i class="fa fa-arrows-alt">Button1</i>
				</button>
		  </div>
          <input type="hidden"  id="hidden_3" name="hidden_3" value="">
   	</div>