2

我有一个链接列表，我希望 jquery 浏览这些链接并找到具有 href 属性且值以字符串“.pdf”结尾的链接。

如果特定链接上 src 属性的值以“.pdf”结尾，我希望 jquery 在该特定链接之后插入一个图像图标（pdf）图标。这有助于用户在视觉上区分常规链接和 pdf 文件链接。

这是标记

<ul class="navlist" id="navlinks">
    <li><a href="someurl.html">Link #1</a></li>
    <li><a name="#anchor1">Named Anchor Link</a></li>
    <li><a href="someurl.html">Link #2</a></li>
    <li><a href="someurl.pdf">Link #3</a></li>
    <li><a href="someurl.html">Link #4</a></li>
    <li><a href="someurl.html">Link #5</a></li>
    <li><a href="someurl.pdf">Link #6</a></li>
    <li><a href="someurl.html">Link #7</a></li>
    <li><a href="mailto:joe@joe.com">Email Link</a></li>
    <li><a href="someurl.pdf">Link #6</a></li>
    <li><a href="someurl.pdf">Link #6</a></li>
    <li><a href="someurl.pdf">Link #6</a></li>
</ul>

这是我写的js

var links = $('#navlinks li a');

links.each(function() {
    var hrefVal = $(this).attr("href");
    if (hrefVal.match(/.pdf$/)) {
        //We can now append the icon to this particular link.
    }
});

我在控制台上出现错误：

未捕获的类型错误：无法调用未定义的方法“匹配”

我不明白为什么会这样。我找到了另一种解决方案来实现这一点：

我找到了另一种用更少的代码行来实现这一点的方法

$('#navlinks li a[href$=".pdf"]').after('<img src="images/small_pdf_icon.gif" alt="PDF Icon" title="PDF File download" />');

我只需要帮助弄清楚为什么 match 方法不起作用？任何帮助是极大的赞赏。多谢你们 ：）

4

2 回答 2

1

你有一个a没有href属性的，所以.attr返回undefined。更好的选择器是"#navlinks li a[href]"，它只选择那些a具有href属性的选择器。

于 2012-12-20T05:34:53.117 回答
0

一个较短的班轮是这样的：

$('li a[href$=".pdf"]').after("<img src='small_pdf_icon.gif' align='absbottom' />");
于 2013-03-19T01:49:33.707 回答