Question

这是我的HTML片段。我正在订阅锚点“查询”的“点击”事件。如何遍历以获得data-driverid值？

<div class="DriverWrapper" data-driverid="108WW" style="background-color: Silver; padding: 4px 4px 4px 4px; page-break-before: always;">
    <strong>Driver ID:</strong>&nbsp;108WW
</div>

<table style="width: 100%;">
    <tr>
        <td style="vertical-align: top; width: 20%">
            <strong>174794</strong>&nbsp;
            <a href="#" class="inquireTripLink">inquire</a>

编辑：

我尝试了这个，它显示了null

的提醒

$(".inquireTripLink").on("click", function (event) 
{
    event.preventDefault();

    var driverId = $(this).closest('.DriverWrapper').data('driverid');
    alert(driverId);

Answer 1

您可以使用closest方法。

$('.inquireTripLink').click(function(){
   var id = $(this).closest('.DriverWrapper').data('driverid');
});

更新：div元素不是所点击元素的父级，您已在div标记后关闭strong标记。您可以使用prev方法：

$('.inquireTripLink').click(function(){
   var id = $(this).closest('table').prev('div').data('driverid');
});

http://jsfiddle.net/J8cWT/

Answer 2

试试这个：

$(".inquireTripLink").on("click", function (event) {
    event.preventDefault();
    var driverId = $(this).closest('table').prev('.DriverWrapper').data('driverid');
    alert(driverId);
})

您的链接似乎位于不是div子女的表格中，而是兄弟姐妹。

<强> jsFiddle example

Answer 3

尝试$(this).closest("[data-driverid]").data("driverid")

Answer 4

$(this).closest("table").prev(".DriverWrapper").data("driverid");

如果您更改了标记，它将会中断，但它适用于您发布的HTML。您可以考虑添加一个共同的父级，然后执行以下操作：

$(this).closest("COMMON PARENT").find(".DriverWrapper").data("driverid");

需要jQuery选择器帮助

4 个答案: