jquery - jQUeryの最も近いスパン未定義

Question

私のjQuery：

$(".result").on("click", function(event){
Side;
var Id = $(this).closest('span.bannerid').data('id');
$.ajax({type: 'GET', url: 'someurl/klik?id=' + Id + '&side=' + Side});
});

HTMLバナー：

<div class="result">
<span class="bannerid" data-id="6"></span>
<p style="text-align: center;">
<a href="http://www.sonmeurl" rel="attachment wp-att-42">
<img src="http://www.someimageurl" width="930" height="180">
</a>
</p>
</div>

問題は、IDがajax呼び出しに対して未定義であり、IDを持つスパンが見つからないように見えることです。

Answer 1

あなたはそので直接得ることができますがclass：

var Id = $('span.bannerid').data('id');

その他の詳細は

 var Id = $(this).children('span.bannerid').data('id');

と

var Id = $(this).find('span.bannerid').data('id');

注： 親要素内の子または孫で.closest()はないことがわかります。element at the same level

Answer 2

.closest() は、親または自己を検索するためのものです。代わりに .find() を使用してください:

var Id = $(this).find('span.bannerid').data('id');

Answer 3

children()直系の子なのでフィルターが使えます。これはfind()、ノード全体を横断するのではなく、直接の子孫のみを横断するため、 を使用するよりもわずかに効率的です。

$(".result").on("click", function(event) {
    Side;
    var Id = $(this).children('span.bannerid').data('id');
    $.ajax({type: 'GET', url: 'someurl/klik?id=' + Id + '&side=' + Side});
});