CODEWITHSUNDEEP
jquery
Rails beginner
Rails beginner

Reputation: 14504

jQUery closest span Undefined

My 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});
});

The HTML banner:

<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>

The problem is that the ID is undefined for the ajax call it seems like it cannot find the span with the id.

Upvotes: 0

Views: 2235

Answers (3)

Jai
Jai

Reputation: 74738

Although you can get directly with its class:

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

other more are

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

and

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

Note: .closest() will find you the element at the same level not the children or grandchildren inside the parent element.

Upvotes: 3

A. Wolff
A. Wolff

Reputation: 74420

.closest() is for searching a parent or self. Use .find() instead:

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

Upvotes: 1

BenM
BenM

Reputation: 53198

Since it's a direct child, you can use the children() filter. This is ever so slightly more efficient than using find(), since it doesn't traverse the whole node - only its direct descendents. 

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

Upvotes: 0

Related Questions