Como recuperar vários URLs de âncoras com jQuery?

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

Pergunta

Eu gostaria de criar uma lista de reprodução JavaScript com o JPlayer. Esta é uma ferramenta agradável e fácil, no entanto, nunca codifiquei com JavaScript.

Veja o JavaScript usado neste demonstração. Ele usa uma lista para armazenar arquivos MP3 e 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"},
];

Então, por enquanto, eu apenas uso um modelo Django (mas pode ser outro mecanismo de modelo) para criar essa variável. No entanto, eu gostaria de criar esta lista (myPlayList) dinamicamente com uma função JavaScript que recuperaria os URLs MP3 e os URLs OGG VORBIS do código HTML.

Assim, a partir deste código 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>

... eu preciso construir uma lista de JavaScript como esta (onde cada índice da lista representa o track-ID No HTML:

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

Por favor, desculpe -me pelo meu inglês feio. Se você precisar de mais informações, basta me dizer.

Obrigada. :-)

Foi útil?

Solução

Isso pode ser feito de várias maneiras, a seguir, é uma possibilidade:

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

Outras dicas

Eu adicionaria uma classe a cada link, ex:

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

Então, você pode fazer algo como:

$("article").each(function() {
    var mp3_url = $("a.mp3_link", this).attr('href');
    // Keep going and build your data structure
 });
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top