Cómo recuperar varias direcciones URL anclas con jQuery?

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

Pregunta

Me gustaría crear una lista de reproducción con javascript Jplayer. Esta es una buena herramienta y fácil, sin embargo nunca estará con javascript.

Mira el JavaScript se utiliza en esta demostración . Utiliza una lista para almacenar archivos MP3 y 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"},
];

Así que por ahora, sólo tiene que utilizar una plantilla de Django (pero podría ser otro motor de plantillas) para crear esta variable. Sin embargo, me gustaría crear esta lista (myPlayList) de forma dinámica con una función de JavaScript que recuperar los urls MP3 y Ogg Vorbis la URL del código HTML.

Por lo tanto, desde este 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>

... Tengo que construir una lista javascript como esta (donde cada índice de la lista establece el track-ID en el código HTML: 

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

Por favor, perdóneme por mi fea Inglés. Si necesita más información sólo dime.

Gracias. : -)

¿Fue útil?

Solución

Esto se puede hacer de muchas maneras, siendo la siguiente una posibilidad: 

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

Otros consejos

Yo añadiría una clase para cada enlace, por ejemplo: 

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

A continuación, se podría hacer algo como: 

$("article").each(function() {
    var mp3_url = $("a.mp3_link", this).attr('href');
    // Keep going and build your data structure
 });
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top