How to retrieve multiple anchors URLs with jQuery?

StackOverflow https://stackoverflow.com/questions/2503594

Question

I would like to create a javascript playlist with Jplayer. This is a nice and easy tool, however I never coded with javascript.

Look at the javascript used in this demo. It uses a list to store MP3 and Ogg files :

var myPlayList = [
    {name:"Tempered Song",mp3:"http://www.miaowmusic.com/mp3/Miaow-01-Tempered-song.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-01-Tempered-song.ogg"},
    {name:"Hidden",mp3:"http://www.miaowmusic.com/mp3/Miaow-02-Hidden.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-02-Hidden.ogg"},
    {name:"Lentement",mp3:"http://www.miaowmusic.com/mp3/Miaow-03-Lentement.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-03-Lentement.ogg"},
    {name:"Lismore",mp3:"http://www.miaowmusic.com/mp3/Miaow-04-Lismore.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-04-Lismore.ogg"},
    {name:"The Separation",mp3:"http://www.miaowmusic.com/mp3/Miaow-05-The-separation.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-05-The-separation.ogg"},
    {name:"Beside Me",mp3:"http://www.miaowmusic.com/mp3/Miaow-06-Beside-me.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-06-Beside-me.ogg"},
];

So for now, I just use a django template (but it could be another template engine) to create this variable. However I would like to create this list (myPlayList) dynamically with a javascript function which would retrieve the MP3 urls and the Ogg vorbis URLs from the HTML code.

Thus, from this HTML code...:

<body>
    <article id="track-0">
        <h1>lorem ipsum</h1>
        <ul>
            <li><a href="...">Mp3</a></li>
            <li><a href="...">Vorbis</a></li>
            <li><a href="...">Flac</a></li>
        </ul>
    </article>

    <article id="track-1">
        <h1>lorem ipsum</h1>
        <ul>
            <li><a href="...">Mp3</a></li>
            <li><a href="...">Vorbis</a></li>
            <li><a href="...">Flac</a></li>
        </ul>
    </article>

    <article id="track-2">
        <h1>lorem ipsum</h1>
        <ul>
            <li><a href="...">Mp3</a></li>
            <li><a href="...">Vorbis</a></li>
            <li><a href="...">Flac</a></li>
        </ul>
    </article>
</body>

... I need to build a javascript list like this (where each index of the list represents the track-ID in the HTML:

var files = [
    {mp3:"...", ogg:"..."},
    {mp3:"...", ogg:"..."},
    {mp3:"...", ogg:"..."},
];

Please excuse me for my ugly english. If you need more informations just tell me.

Thank you. :-)

Was it helpful?

Solution

This can be done in many ways, the following being one possibility:

var files = [];
$('article').each(function() {
    files.push({
        mp3: $('li:nth-child(1) a', this).attr('href'),
        ogg: $('li:nth-child(2) a', this).attr('href')
    });
});

OTHER TIPS

I would add a class to each link, ex:

<a class="mp3_link" href="...">Mp3</a>

Then, you could do something like:

$("article").each(function() {
    var mp3_url = $("a.mp3_link", this).attr('href');
    // Keep going and build your data structure
 });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top