Comment récupérer plusieurs ancres URL avec jQuery?

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

Question

Je voudrais créer une liste de lecture avec javascript jPlayer. C'est un outil facile et agréable, mais je ne codé avec javascript.

Regardez le javascript utilisé dans cette démo . Il utilise une liste pour stocker des fichiers MP3 et Ogg: 

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"},
];

Pour l'instant, je viens d'utiliser un modèle de django (mais il pourrait être un autre moteur de template) pour créer cette variable. Cependant, je voudrais créer cette liste (myPlayList) de manière dynamique avec une fonction javascript qui récupérerait les urls MP3 et les URL de Ogg Vorbis à partir du code HTML.

Ainsi, à partir de ce code HTML ...: 

<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>

... Je dois construire une liste javascript comme celui-ci (où chaque index de la liste représente la track-ID dans le code HTML: 

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

S'il vous plaît excusez-moi pour mon anglais laid. Si vous avez besoin de plus d'informations me dire.

Merci. : -)

Était-ce utile?

La solution

Cela peut être fait à bien des égards, les éléments suivants étant une possibilité: 

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')
    });
});

Autres conseils

Je voudrais ajouter une classe à chaque lien, ex: 

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

Ensuite, vous pouvez faire quelque chose comme: 

$("article").each(function() {
    var mp3_url = $("a.mp3_link", this).attr('href');
    // Keep going and build your data structure
 });
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top