jquery - 无法使用match()；检查 jquery 中字符串的内容

Question

我有一个链接列表，我希望 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.
    }
});

我在控制台上遇到错误:

未捕获类型错误:无法调用未定义的“match”方法

我不明白为什么会发生这种情况。我找到了另一种解决方案来实现此目的:

我找到了另一种方法，可以用更少的代码行实现此目的

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

我只需要帮助弄清楚为什么 match 方法不起作用？任何帮助是极大的赞赏。 谢谢大家:)

Answer 1

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