需要jQuery選擇器幫助

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元素不是單擊元素的父元素，您已在strong標記后關閉div標記。 你可以使用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例子

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");