2013-02-24 24 views
0

如何选择只包含特定href的链接的第一个实例,解决方案可以是css或javascript,我更喜欢css,因为我需要进行样式更改选择了正确的链接,但我甚至不知道css可以做我需要的。选择特定href的第一个实例

<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_file=936download_file=935download_file=932等链接的实例

李的数量将永远是不同的,以及同一链接的数量,所以我不能选择例如第三个链接href不会总是935在第三个li,它可能是936或932取决于具体情况。

回答

0
$('a[href*="download_file=935"]:first') 

只是在CSS中做到这一点非常复杂。

+1

你将不得不重复每个值的jQuery选择器,这可能很麻烦(尽管不如CSS)。 – BoltClock 2013-02-24 14:08:55

+1

使用“attribute ends with”选择器可能会更好: '$('a [href $ =“download_file = 935”]:first')'。在这种情况下不会有太大区别,但如果知道'download_file'部分始终位于URL的末尾,那么精确度总是很好。 – 2013-02-24 14:13:10

0

使用JavaScript:

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

first.className = 'first'; 

JS Fiddle demo

这种方法为了允许CSS样式添加了CSS类名,所以应该结合每种方法的好处,只要浏览器支持document.querySelector()即可。

+1

你必须重复这一过程,每个值,这可能是麻烦的。 – BoltClock 2013-02-24 14:09:12

+0

谢谢你的建议,它在FF中工作,但不会在IE中工作,所以我不得不使用下面的解决方案,并使用.addClass()而不是.className – user2104522 2013-02-24 23:59:35

2

您可以将filter对一个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); 
… 
0

使用正则表达式:

$(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++; 
    } 
}); 
}); 

http://jsfiddle.net/vzJVa/

相关问题