如何获取嵌套表格的div内的输入文本的值？

Question

我有嵌套下面的div元素和输入内。当按钮被点击时，我想捕获并获取其中一个输入类型文本的值。显然现在，使用下面的jquery代码无法获得class =“name”的输入文本之一，但第一个输入和textarea能够被捕获。那么，当单击按钮时，用class =“name”捕获我的第二个输入文本的值的确切代码是什么。谢谢你，这里是下面的详细信息：

jQuery代码：

$(function() { 
      $('.postrep').click(function() { 
       // e.preventDefault(); 
       var inputs = $(this).closest('div').find('input'); //finding the inputs inside the div 
       var textin = $(this).closest('div').find('textarea'); //finding the textarea inside the div 

       var dataObject = { 

        Id: inputs.first().val(), // getting the first input value in the div 

        name: inputs.first('input').next('.name').val(), // How do I get this second input value? 

        reply: textin.first().val() //getting the value of the first textarea in the div 
       }; 
      }); 
      }); 

HTML：

<table id="mytable"> 

    <tr > 
     <td class="tdstyle" > 

    <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item.name) </div> 

    <p> @Html.DisplayFor(modelItem => item.comment) </p> 
    <p > <input type="button" id="like" name="like" value="Like" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)" /></p>                                               
    <div id="divReply" class ="divrep" > 
      <table> 

       <tr > 

        <td > 
         <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item2.name) </div> 

        <p> @Html.DisplayFor(modelItem => item2.reply) </p> 

        </td> 
       </tr> 

      </table>  

    <div> 
     <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px"> 
      <input type="text" id="comidvalue" name="id" class="id" value="@Html.DisplayFor(modelItem => item.Id)" /> 
     </div> 

     <br /> 
     <input type="text" id="namerep" name="name" class="name" /> <!-- I want to get the value of this --> 

     <br /> 
     <textarea id="reply" name="reply" class="reply" ></textarea> 

     <br /> 

     <input type="button" class="postrep" value="Post Reply" name="butname" style="cursor:pointer" /> 

    </div> 
      <br /> 

    </div> 
     </td>  
    </tr> 


</table> 

Answer 1

您可以使用id选择来获得输入框的值

$('#namerep').val(); 

但是请确保您没有多个输入相同id，如果您有多个id s然后删除id并使用class="name"只获得输入值。

您可以使用jQuery的属性选择器获得的输入值与class="name"，请参见下面的代码 -

$(function() { 
      $('.postrep').click(function() { 
       // e.preventDefault(); 
       //store parent div in a variable and use it at multiple places 
       var $parentDiv = $(this).closest('div'); 
       var inputs = $parentDiv.find('input'); //finding the inputs inside the div 
       var textin = $parentDiv.find('textarea'); //finding the textarea inside the div 

       var dataObject = { 

        Id: inputs.first().val(), // getting the first input value in the div 

        name: $parentDiv.find('input[class="name"]').val(), //get closest div and find input with class="name" 

        reply: textin.first().val() //getting the value of the first textarea in the div 
       }; 
      }); 
      }); 

Answer 2

你可以得到

var name= $('#namerep').val();