jQuery: Retreving only first attribute of a specific node from XML

Question

Basically, dealing with an XML feed that's not written in the nicest way (Youtube API data), and follows on from a previous question on the topic.

Currently, there are four nodes in the file named media:thumbnail. Each media.thumbnail node has various attributes, one of which is url. I am only wanting to retrieve value of the first occurrence of the url attribute (the result being http://i.ytimg.com/vi/CQP_AuT4zXQ/2.jpg).

Example;

<item>
...
<media:group>
...
    <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/2.jpg' height='90' width='120' time='00:04:53.500'/>
    <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/1.jpg' height='90' width='120' time='00:02:26.750'/>
    <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/3.jpg' height='90' width='120' time='00:07:20.250'/>
    <media:thumbnail url='http://i.ytimg.com/vi/CQP_AuT4zXQ/0.jpg' height='240' width='320' time='00:04:53.500'/>
...
</media:group>
...
</item>

My knowledge of jQuery is still developing, and I've been able to retrieve the values of the url attribute for all occurrences of media:thumbnail using the following code:

$(this).find("[nodeName=media:thumbnail]").each(function()
      {
        $("#output").append("<img src=\"" + $(this).attr("url") + "\">\n");
      });

How do I now limit this so I only grab the value of url for the first occurrence of media:thumbnail?

Answer 1

var elt = $(this).find("[nodeName=media:thumbnail]").first()

See also:

http://api.jquery.com/first/

EDIT

Here's an example that does exactly what you need (but with HTML instead of XML)

http://jsbin.com/ecuku4/2/edit

Cheers!