Finding text of <p> closest row inside a div HTML/Jquery

Question

My table is built with the same ID's on every row, with a foreach loop. To find the text inside the <p class="comment" - I have to specify where ( I want to find the closest one )

My table looks like this:

        <c:forEach items="${items}" var="item">
        <div class="container theme-showcase" role="main">
            <div class="row">
                <div class="col-md-6">
                    <table class="table fixed">
                        <tbody id="extend">
                            <tr data-toggle="collapse123" class="clickableRow" nowrap="true" data-target=".demo${item.id}" id="${item.id}">
                                <td class="AMLLeft" nowrap="true">
                                    <label for="important"style="display: inline !important">ID:</label>
                                    <p class="important"style="display: inline !important">${item.id}</p>
                                </td>
                                <td align="right" class="AMLRight">
                                    <pre class="thepre">Transaction sum: ${item.sum} ${item.currencyCode}</pre>
                                </td>
                            </tr>
                            <tr class="hiddenRow">
                                <td align="left">
                                    <div class="collapse123 demo${item.id}"><p>AML ID: ${item.id}</p></div>
                                </td>
                                <td align="right" nowrap="false">
                                    <div class="collapse123 demo${item.id}"><input type="button" value="Comment" class="btn btn-xs btn-primary commentButton" <a href="#myModal" data-toggle="modal" id="${item.id}" data-target="#edit-modal"></div>
                                </td>
                            </tr>
                            <tr class="hiddenRow">
                                <td align="left">
                                    <div class="collapse123 demo${item.id}"><p>AML Category: ${item.amlClientCategory}</p></div>
                                </td>
                                <td align="right">
                                    <div class="collapse123 demo${item.id}"><input type="button" value="Close" class="btn btn-xs btn-primary closeButton"></div>
                                </td>
                            </tr>
                            <tr class="hiddenRow">
                                <td align="left">
                                    <div class="collapse123 demo${item.id}"><p>Client ID: ${item.clientId}</p></div>
                                </td>
                                <td align="right">
                                    <div class="collapse123 demo${item.id}"><input type="button" value="Set Investigate" class="btn btn-xs btn-primary investigateButton"></div>
                                </td>
                            </tr>
                            <tr class="hiddenRow">
                                <td align="left">
                                    <div class="collapse123 demo${item.id}"><p class="status">Status: ${item.status}</p></div>
                                </td>
                                <td align="right">
                                    <div class="collapse123 demo${item.id}"></div>
                                </td>
                            </tr>
                            <tr class="hiddenRow">
                                <td align="left">
                                    <div class="collapse123 demo${item.id}"><p class="comment">Comment: ${item.comment}</p></div>
                                </td>
                                <td align="right">
                                    <div class="collapse123 demo${item.id}"></div>
                                </td>
                            </tr>
                            <tr class="hiddenRow">
                                <td align="left">
                                    <div class="collapse123 demo${item.id}"><p>Transaction sum: ${item.sum} ${item.currencyCode}</p></div>
                                </td>
                                <td align="right">
                                    <div class="collapse123 demo${item.id}"></div>
                                </td>
                            </tr>
                    </table>

                </div>
            </div>
        </div>
    </c:forEach>

I want to find the text of <p class="comment">${item.comment}</p> but this time it's inside a <div> . I'm not sure how to do this but this is the code I've tried so far:

var commentValue = $(this).closest('tr.hiddenRow').siblings().find('p.comment').text();

Any help is very appreciated!

I know I've posted a similar question here but this is different because it's inside a <div> , and I can't help myself.

Answer 1

To save people trawling through the comments, the eventual solution is here: https://jsfiddle.net/5nL1e31z/3

---

I believe this achieves what you wanted, and I've tried to break it out so it's clear what's happening: https://jsfiddle.net/5nL1e31z/ If it isn't quite right, just let me know and I can update it.

$('.test-button').click(function () {

    var parentRow = $(this).parent().parent();
    $(parentRow).css('background-color', 'red');

    var hiddenRow = $(parentRow).siblings('.hiddenRow');
    $(hiddenRow).css('background-color', 'yellow');

    var commentTextP = $(hiddenRow).find('.comment');
    console.log(commentTextP.text());
});

Answer 2

var commentvalue = $(this).parent().find('p').text();

http://jsfiddle.net/ux0a3zsx/

Because the button is what this refers to and p is not inside it

Answer 3

你试过这个吗？

var text= $(this).closest('.hiddenRow').find('.comment');