查找文本<p> div HTML/Jquery 中最近的一行

Question

我的表在每一行上都使用相同的 ID 構建，並帶有 foreach 循環。 要在<p class="comment"找到文本 - 我必須指定在哪里（我想找到最接近的）

我的桌子看起來像這樣：

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

我想找到<p class="comment">${item.comment}</p>的文本，但這次它在<div> 。 我不知道該怎么做，但這是我迄今為止嘗試過的代碼：

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

非常感謝任何幫助！

我知道我在這里發布了一個類似的問題，但這是不同的，因為它在<div> ，我無法幫助自己。

Answer 1

為了避免人們瀏覽評論，最終的解決方案在這里： https : //jsfiddle.net/5nL1e31z/3

---

我相信這可以達到您想要的效果，並且我已經嘗試將其分解，因此很清楚發生了什么： https : //jsfiddle.net/5nL1e31z/如果它不太正確，請告訴我，我可以更新它.

$('.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/

因為button是this所指的，而p不在里面

Answer 3

你試過這個嗎？

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