0

如何仅选择包含特定链接的第一个实例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>

正如您在上面的代码中看到的那样，前两个链接并不相同，但它们具有相同的结尾。我需要一种方法来仅选择包含or或等的链接的第一个实例。download_file=936download_file=935download_file=932

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

4

4 回答 4

2

您可以对 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);
…
于 2013-02-24T14:06:43.620 回答
0

使用 JavaScript：

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

first.className = 'first';

JS 小提琴演示。

这种方法添加了一个 CSS 类名以允许 CSS 样式，因此应该结合每种方法的优点，只要浏览器支持document.querySelector().

于 2013-02-24T14:04:09.823 回答
0 
$('a[href*="download_file=935"]:first')

仅在 CSS 中执行此操作变得非常复杂。

于 2013-02-24T14:08:01.780 回答
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/

于 2013-02-24T14:08:11.073 回答