如何在行表中找到div元素并返回值?

时间:2014-10-10 08:29:50

标签: javascript jquery html

我在下面有一个表,其中的行由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>

4 个答案:

答案 0 :(得分:3)

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

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

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

DEMO

答案 1 :(得分:1)

这是怎么回事?

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

            });
        });

答案 2 :(得分:1)

试试fiddle 只需将api更改为

alert(findiv.text());

希望有所帮助

答案 3 :(得分:1)

选择潜水课程 divrep ,选择器是&#34; .divrep&#34;并且每次返回节点的内容如果你想要内部html则必须使用api html,如果你不想将内容简单地作为api文本text

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