如何只选择包含特定href
的链接的第一个实例,解决方案可以是css或javascript,我更喜欢css,因为我需要在选择正确的链接后进行样式更改但是我甚至不确定css可以做我需要的。
<ul class="digital-downloads">
<li> <a href="order_5129865a7d832&download_file=936">Link</a></li>
<li> <a href="order_5129870f01410&download_file=936">Link</a></li>
<li> <a href="order_512a033229f68&download_file=935">Link</a></li>
<li> <a href="order_512a048548f68&download_file=935">Link</a></li>
<li> <a href="order_512a0c31734a6&download_file=932">Link</a></li>
</ul>
正如您在上面的代码中所看到的,前两个链接不相同,但它们具有相同的结尾。我需要一种方法来仅选择包含download_file=936
或download_file=935
或download_file=932
等链接的第一个实例。
li的数量将始终不同以及相同链接的数量,因此我无法选择第三个li,因为链接href
在第三个li
上始终不会是935 ,根据具体情况,可能是936或932。
答案 0 :(得分:2)
您可以针对jQuery选择应用filter,并在与之前的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);
…
答案 1 :(得分:0)
使用JavaScript:
var first = document.querySelector('a[href$="936"]');
first.className = 'first';
这种方法添加CSS类名以允许CSS样式,因此只要浏览器支持document.querySelector()
,就应该结合每种方法的好处。
答案 2 :(得分:0)
$('a[href*="download_file=935"]:first')
要做到这一点只是CSS变得非常复杂。
答案 3 :(得分: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++;
}
});
});