如何在行表中找到一个div元素并返回值？答案

【问题标题】：How to find a div element inside the row table and return the value?如何在行表中找到一个div元素并返回值？
【发布时间】：2014-10-10 08:29:49
【问题描述】：

我有一个表格，下面是 foreach 语句循环的行。如您所见，在表格内部，有各种 div 元素。我想通过单击带有 class="postrep" 的按钮来获取并返回带有 class="divrep" 的 div 元素之一的值。我在下面尝试了一些方法，但它返回 null 对象，所以我不确定我是否得到了正确的 div 元素。

jQuery：

$(function () {
           $('.postrep').click(function () {
               var findiv = $(this).closest('table').find('div[class="divrep"]');
               alert(findiv.toString());

            });
        });

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" style="color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)" /></p>                                                                                                                                 
  <div id="divReply" class ="divrep"> I want to return this string value...

     <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" style="width:445px;resize:none" />

       <br />
       <textarea id="reply" name="reply" class="reply" style="width:445px;height:100px;resize:none" ></textarea>

         <br />

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

  </div>

        </td>       
    </tr>

</table>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

尝试使用.contents()抓取文本节点以及子元素，并从返回的集合中获取第一个元素，

$('.postrep').click(function () {
    var findiv = $(this).closest('.divrep');
    alert(findiv.contents()[0].nodeValue);
});

建议在finddiv 对象上使用.text()，但如果假设finddiv 内有更多文本节点，则更喜欢此解决方案。

DEMO

【讨论】：

【解决方案2】：

这样怎么样？

        $(function () {
           $('.postrep').click(function () {
               var findiv = $(this).closest('.divrep');
               alert(findiv.html());

            });
        });

【讨论】：

【解决方案3】：

试试fiddle 只需将 api 更改为

alert(findiv.text());

希望对你有帮助

【讨论】：

【解决方案4】：

选择带有 divrep 类的潜水，选择器是“.divrep”，此外，如果您想要内部 html 或 api，则返回节点的内容必须使用 api html如果您不想将内容简单地写成text

var findiv = $(this).closest('table').find('.divrep');
 alert(findiv.html());

【讨论】：