qTip2 hash navigation using $.ajax

Basically, I'm creating hash navigation to take users directly to a page header, listed as a link on hover.

I'm trying to pair h1 elements on various pages with their children span id values. The h1 text is the text displayed in each href, and the span id value is the hash for the url.

I'm using qTip2 to display the links under a "parent" li element, which takes the user to the page without a hash. I'm using $.ajax to fetch the h1 and span id values. Source code is directly from the qTip2 website, which can be found here.

This works great; what isn't working so great, however, is getting the hash values to match up with the h1 text values.

The following code outputs everything but the hash perfectly. I'm given only one of the id values instead of all of them. I've successfully created an array with the span id values, but have no clue how to pair them up correctly with their h1 parents to create the correct url for each link.

Here is the qTip code:

$('li.menu a').each(function() {
    $(this).qtip({
        content: {
            text: function(event, api) {
                var originalURL = $(this).attr('href');
                $.ajax({
                    url: $(this).attr('href')
                })
                .then(function(url) {
                    var $wrap = $("<div></div>").append(url);
                    var titles = $wrap.find("#maincontent h1 > *").unwrap().wrap('<a href="' + originalURL + "#" + $wrap.find('span').attr('id') + '" />').parent();

                    api.set('content.text', titles);
                }, function(xhr, status, error) {
                    api.set('content.text', status + ': ' + error);
                });

                return 'Loading...';
            }
        },
        position: {
            my: 'top center',
            at: 'bottom center',
            adjust: {
                y: 10
            }
        },
        hide: {
            delay: 1000,
            event: 'mouseleave',
            fixed: true
        }
    });
});

How do I pair up the values to create each link with the h1 as the display text and the child span id value as the hash? I'm open to any suggestions.

UPDATE: Solution added to original question below:

$('#desktop ul li.menu a').each(function() {
    $(this).qtip({
        content: {
            text: function(event, api) {
                var $url = $(this).attr('href');
                var $title = $(this).text()
                $.ajax({
                    url: $(this).attr('href'),
                })
                .then(function(url) {

                    var $data = '';
                    var $headers = $(url).find('#maincontent h1');
                    $headers.each(function(){
                        if ($headers.length > 1) {
                            $data += '<a href="' + $url + '#' + $(this).children().attr('id') + '" class="' + $title + '">' + $(this).text() + '</a>';
                        }
                        else {
                            api.destroy(true);
                        }
                    });

                    api.set('content.text', $data);                     

                }, function(xhr, status, error) {
                    api.set('content.text', status + ': ' + error);
                });

            return '<div class="navi-loading">Loading...</div>';
            }
        }
    });
});

For anyone else who has this issue, or wants to implement my solution, here's what I did:

    $('#desktop ul li.menu a').each(function() {
        $(this).qtip({
            content: {
                text: function(event, api) {
                    var $url = $(this).attr('href');
                    var $title = $(this).text()
                    $.ajax({
                        url: $(this).attr('href'),
                    })
                    .then(function(url) {

                        var $data = '';
                        var $headers = $(url).find('#maincontent h1');
                        $headers.each(function(){
                            if ($headers.length > 1) {
                                $data += '<a href="' + $url + '#' + $(this).children().attr('id') + '" class="' + $title + '">' + $(this).text() + '</a>';
                            }
                            else {
                                api.destroy(true);
                            }
                        });

                        api.set('content.text', $data);                     

                    }, function(xhr, status, error) {
                        api.set('content.text', status + ': ' + error);
                    });

                return '<div class="navi-loading">Loading...</div>';
                }
            }
        });
    });