Javascript 如何在嵌套表的div中获取输入文本的值？

我在下面的表中嵌套了div元素和输入。我想在单击按钮时捕获并获取其中一个输入类型文本的值。显然现在，使用下面的jquery代码无法获取class=“name”的输入文本，但是第一个输入和文本区域能够被捕获。那么，当单击按钮时，用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
               };
             });
          });

<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>

HTML:

 $(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
               };
             });
          });

<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>

@DisplayFor（modelItem=>item.name）
@Html.DisplayFor（modelItem=>item.comment）


@DisplayFor（modeleItem=>item2.name）
@Html.DisplayFor（modelItem=>item2.reply）

您可以使用

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
               };
             });
          });

你可以

---

var name=$（'#namerep'）.val（）

为什么需要

最近（'div'）。查找（'namerep'）

如果

$（'namerep'）

将查找输入，因为

id

必须是唯一的。@BhushanKawadkar:我同意。不，当元素在内部循环时不能使用id，而不是类。谢谢，它应该是name:$（this）。最近（'div'）。查找（'input[class=“name]”）val（），@蒂姆麦克，对不起，我的错。。删除

从代码中，为什么编辑您的答案？不需要使代码复杂化。这是正确的，只是缺少.val（）