Question

I have 3 tags called ‘Url’ in my XML feed that I am trying to extract data from using jQuery. The first 2 are image files, the other is a web link.

One is nested at this level

Offer > Images > Image > Url

Another is at this level:

Offer > Images > ZoomImage > Url

The last is at this level:

Offer > Url

If I use the following code, I only get the first URL

    $(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "datafile.xml",
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('Offer').each(function(){
                        var title = $(this).find('Title').text();
                        var url = $(this).find('Url').text();
                        var description =  $(this).find('Description').text();  
$('<div class="title"</div>').html('<a href="'+url+'">'+title+'</a>').appendTo('#page-wrap');
                    });

I actually want all 3 URLs returned separately to use in my code. How can I achieve this?

Thanks in advance.

Answer 1

var url = $(this).children('Url').text();
var urlImage = $(this).find('Images ZoomImage Url').text();
var urlZoomImage = $(this).find('Images Image Url').text();

Just be more specific in your targeting using .find() and .children()