Javascript 选择特定a href的第一个实例

如何仅选择包含特定

href

的链接的第一个实例，解决方案可以是css或javascript，我更喜欢css，因为一旦选择了正确的链接，我需要进行样式更改，但我甚至不确定css是否能满足我的需要

<ul class="digital-downloads">
    <li> <a href="order_5129865a7d832&amp;download_file=936">Link</a></li>
    <li> <a href="order_5129870f01410&amp;download_file=936">Link</a></li>
    <li> <a href="order_512a033229f68&amp;download_file=935">Link</a></li>
    <li> <a href="order_512a048548f68&amp;download_file=935">Link</a></li>
    <li> <a href="order_512a0c31734a6&amp;download_file=932">Link</a></li>
</ul>

从上面的代码可以看出，前两个链接并不完全相同，但它们有相同的结尾。我需要一种方法来仅选择包含

download\u file=936

或

download\u file=935

或

download\u file=932

等链接的第一个实例

li的数量和相同链接的数量总是不同的，因此我不能选择第三个li，例如，第三个li的链接

href

不会总是935，根据情况可能是936或932。

使用JavaScript：

var first = document.querySelector('a[href$="936"]');

first.className = 'first';

此方法添加CSS类名以允许CSS样式化，因此应结合每种方法的优点，只要浏览器支持

document.querySelector（）

您可以对jQuery选择应用一个，在与之前的href进行比较时循环使用它们：

var last;
var firsts = $(".digital-downloads li a").filter(function(){
    var link = this.href.match(/download_file=\d+$/)[0];
    if (link == last)
        return false; // we had this before, don't select
    else {
       last = link;
       return true; // we've found a new one!
    }
});

简言之，处理不匹配的正则表达式：

…
    var m = this.href.match(/download_file=\d+$/);
    return m && m[0] != last && (last=m[0],true);
…

仅使用CSS就可以完成这项工作，这非常复杂。

使用正则表达式：

$(function() {
 var count = 0;
 $('a').each(function() {
  var match = $(this).attr('href').match(/(.*download_file=\d+)/);
    if (match !== null && count == 0) {
        alert(match.pop());
        count++;
    }
 });
});

---

您必须为每个值重复jQuery选择器，这可能会很麻烦（尽管比CSS要简单）。最好使用“属性以”选择器：

$（'a[href$=“download_file=935”]：first'）

。在这种情况下不会有太大区别，但如果您知道

下载\u文件

部分总是位于URL的末尾，那么准确一点总是好的。您必须对每个值重复此操作，这可能会很麻烦。谢谢您的建议，它在FF中起作用，但在IE中不起作用，因此我必须使用下面的解决方案，并使用.addClass（）而不是.className

$(function() {
 var count = 0;
 $('a').each(function() {
  var match = $(this).attr('href').match(/(.*download_file=\d+)/);
    if (match !== null && count == 0) {
        alert(match.pop());
        count++;
    }
 });
});