Question

我有一个由mySQL查询动态生成的表格，如下所示：

|    title    | Published |      Delete     |
---------------------------------------------
|  Review_1   |   Yes     | click_to_delete |
|  Review_2   |   Yes     | click_to_delete |
|  Review_3   |   Yes     | click_to_delete |

每个表行都是构建的 - 例如 - 使用以下代码（例如，id仅为1）：

<tr>
    <td><a class="editlink" id="1" href="#">Review_1</a><td>
    <td><input type="checkbox" /></td>
    <td><a class="delete_review" id="1" href="#"><img src="remove.png"/></a></td>
</tr>

我希望当用户点击时 - 例如 - 第一个链接'click_to_delete'会弹出一条警告说他将删除评论'Review_1'。

因此，当用户点击相应的“click_to_delete”时，我想获取Review_1链接的TEXT。

我尝试使用以下代码：

$(".delete_review").click(function() {
    var index = $(".editlink").index(this);
    var item_name = $(".editlink").eq(index).text();
    alert(item_name);
}

我不明白为什么这一行正确返回元素的位置

var index = $(".editlink").index(this);

虽然这个没有返回链接的文本：

var item_name = $(".editlink").eq(index).text();

当然 $（this）在这种情况下没用，因为事件不会被同一个元素触发。

Answer 1

您可以使用closest（或parent遍历DOM树到td元素，但请记住，如果您碰巧在其间添加了更多元素，它将会中断）然后使用siblings和eq来获得第一个兄弟：

var item_name = $(this).closest("td").siblings().eq(0).text();

index方法返回元素相对于其兄弟的索引。在您的情况下，链接没有兄弟，因此索引应始终为0。

Answer 2

尝试使用DOM遍历方法。

例如：

$(".delete_review").click(function() {
    var item_name = $(this).closest('tr').find('.editlink').text();
    alert(item_name);
}

Answer 3

我在这里做了一个简单的例子：

http://jsfiddle.net/yX94V/

如何匹配由其他元素触发的元素。了解等级

3 个答案: