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>

问题是 ajax 调用的 ID 未定义，它似乎无法找到具有该 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()过滤器。这比 using 稍微高效一些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});
});