javascript - HTML/jQuery finding text in closest <p> tag

Question

I've got a table with different td's with the same ID, this is my table, in a foreach loop:

<td class="AMLLeft" style="display:inline-block; !important">ID:
    <p class="important">${item.id}</p>
</td>
<td align="right" nowrap="true" class="AMLRight">Transaction sum: ${item.sum} ${item.currencyCode}</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">
        <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">
        </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">
        </div>
    </td>
</tr>
<tr class="hiddenRow">
    <td align="left">
        <div class="collapse123 demo${item.id}">
            <p>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>Comment: ${item.comment}</p>
        </div>
    </td>
    <td align="right">
        <div class="collapse123 demo${item.id}"></div>
    </td>
</tr>

I want to be able to find the value of the 2nd rows: <p class="important">${item.id}</p>, This is the code I've tried so far, which didn't work:

$(".commentButton").on('click', function () {
  var id = $(this).find('p.important').value();
  alert("id is:" + id);
});

Any help with this is very much appreciated!

Answer 1

$(this).closest('tr').siblings().find('p.important').text();

try this

Using the button select the tr use siblings() to get the tr of the p with .important. after getting the tr use .find() to search for the p.important and finally using .text() get the value.