如何使用 jQuery 检索多个锚点 URL？答案

【问题标题】：How to retrieve multiple anchors URLs with jQuery?如何使用 jQuery 检索多个锚点 URL？
【发布时间】：2010-03-24 05:07:55
【问题描述】：

我想用 Jplayer 创建一个 javascript 播放列表。这是一个不错且简单的工具，但我从未使用 javascript 编写代码。

查看此demo 中使用的javascript。它使用一个列表来存储 MP3 和 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"},
];

所以现在，我只使用一个 django 模板（但它可能是另一个模板引擎）来创建这个变量。但是，我想使用 javascript 函数动态创建此列表 (myPlayList)，该函数将从 HTML 代码中检索 MP3 url 和 Ogg vorbis URL。

因此，从这段 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>

...我需要像这样构建一个javascript列表（列表的每个索引代表HTML中的track-ID：

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

请原谅我丑陋的英语。如果您需要更多信息，请告诉我。

谢谢。 :-)

【问题讨论】：

标签： javascript jquery html dom jplayer

【解决方案1】：

这可以通过多种方式完成，以下是一种可能性：

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

【讨论】：

为什么使用:nth-child()而不是:eq()？

【解决方案2】：

我会为每个链接添加一个类，例如：

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

然后，您可以执行以下操作：

$("article").each(function() {
    var mp3_url = $("a.mp3_link", this).attr('href');
    // Keep going and build your data structure
 });

【讨论】：