Question

HTML

<a href="report.php?id=5&file=name.jpg" id="5" class="report">Report Content<span class="hidden">name.jpg</span></a>

jQuery

$('.report').click(function(event) {
    var id = this.id;
    var file = $(this).children('span').textContent;

    alert(file);

    $(this).fadeOut("slow");

    $.ajax({
        type: 'GET',
        data: 'id=' + id + '&file=' + file,
        url: 'http://www.sitename.com/report.php',
        success: function() {

        }
    });
    return false;   
}

The line of code I’m having trouble with:

    var file = $(this).children('span').textContent;

How can I properly grab that span’s text content and store it in a variable file ?

Also, is there a better way I should be doing this, or is my method okay?

Answer 1

Use the text method:

var file = $(this).children('span').text();

Since children returns an instance of jQuery, it won’t have a textContent property. Alternatively, if you do want to use the native textContent property, you can access the underlying DOM element:

var file = $(this).children('span')[0].textContent;

However, be aware that that is slightly different from the jQuery version in that the text method returns the concatenated text from all selected nodes (in your current code, that is just the single span, but if you added another span element, it would be different).