jquery - 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要素はクリックされた要素の親ではありません。タグの後にタグを閉じまし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 の例

Answer 3

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

マークアップを変更すると壊れますが、投稿した html で動作します。共通の親を追加してから、代わりに次のことを検討してください。

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

Answer 4

試す$(this).closest("[data-driverid]").data("driverid")