如何在行表中查找div元素并返回值？

Question

I have a table below which row is being looped by foreach statement. Inside the table, there are various div elements as you can see. I want to get and return the value of one of the div element with a class="divrep" by clicking the button with a class ="postrep" . I tried something below but it returns null object so I'm not sure if I get the right div element.

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>

Answer 1

Try to use .contents() to grab the text nodes as well as the child elements and get the first element from the returned collecion,

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

Using .text() over the finddiv object would be recommended, but if suppose you have more text nodes inside of finddiv then prefer this solution.

DEMO

Answer 2

What about this way?

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

            });
        });

Answer 3

try the fiddle just change the api as

alert(findiv.text());

hope it helps

Answer 4

for select the dive with class divrep the selector is ".divrep" and in addintion per return the content of the node you must use the api html if you want inner html or the api text if you wont the content as simply text

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