如何在嵌套表的 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，如果您有多个ids，则删除 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();