使用 jquery 检索表中的文本值

Question

我有这个html(使用Razor在表中显示行(：

@foreach (var item in Model.AllGroups)
{
<tr class="group-row" data-id="@item.Id">
<td class="align-middle text-primary">
<h4 class="group-name" > @Html.DisplayFor(m => item.Name)</h4>
</td>
<td>
<a class="btn btn-small btn-primary detail-group-btn">
<i class="fas fa-user text-white"></i>
</a>
<a class="btn btn-small btn-secondary edit-group-btn">
<i class="fa fa-edit text-primary"></i>
</a>
<a class="btn btn-small btn-danger delete-group-btn">
<i class="fa fa-trash text-white bg-"></i>
</a>
</td>
</tr>
}

我在delete-group-btn按钮上绑定了一个单击事件，当我单击时，我想检索<H4>标签的文本值。

在这一步，我是这样做的：

$(this).closest('.group-row').find('.group-name').text()

我工作，但我不确定这是正确和优化的方式。

有没有更好的解决方案？

Answer 1

由于您可能有多个行(因为运行foreach(，因此您可以为每行中的h4元素分配一个唯一的id。

例如，id="h4_0" 表示第一行中的 h4 元素，id="ht_1" 表示第二行中的 h4 元素，...

然后，您可以将"onclick"属性添加到每个按钮，该按钮调用以行索引作为参数的特定函数。在该函数中，您将行索引与 "h4_"，并且您在同一行中有 h4 元素的 id。

第一行示例：

<h4 class="group-name" id="h4_0" > @Html.DisplayFor(m => item.Name)</h4>

<a class="btn btn-small btn-danger delete-group-btn" onclick="doSomething(0)">
<script>
function doSomething(rowIndex) {
var h4Id = "h4_" + rowIndex;
// Do something ...
}
</script>

这不是最好的解决方案，但它也适用于:)

Answer 2

我会将id添加到"数据目标"属性中，如下所示：

@foreach (var item in Model.AllGroups)
{
<tr class="group-row" data-id="@item.Id">
<td class="align-middle text-primary">
<h4 class="group-name" id="@item.Id"> @Html.DisplayFor(m => item.Name)</h4>
</td>
<td>
<a class="btn btn-small btn-primary detail-group-btn">
<i class="fas fa-user text-white"></i>
</a>
<a class="btn btn-small btn-secondary edit-group-btn">
<i class="fa fa-edit text-primary"></i>
</a>
<a class="btn btn-small btn-danger delete-group-btn" data-target="@item.Id">
<i class="fa fa-trash text-white bg-"></i>
</a>
</td>
</tr>
}

要像这样检索：

$( '#' + $(this).data('target') ).text();