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.
    }
});

我登上控制台时出错：

未捕获的TypeError：无法调用未定义的方法'匹配'

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

我找到了用较少行代码实现这一目标的另一种方法

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

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

Answer 1

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

Answer 2

较短的衬垫是这样的：

$('li a[href$=".pdf"]').after("<img src='small_pdf_icon.gif' align='absbottom' />");

无法使用match（）;在jquery中检查字符串的内容

2 个答案: