2

リンクのリストがあり、jquery でそれらのリンクを調べて、文字列「.pdf」で終わる値を持つ href 属性を持つリンクを見つけたいと思います。

特定のリンクの 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: 未定義のメソッド 'match' を呼び出せません

なぜこれが起こっているのかわかりません。これを達成するための別の解決策を見つけました：

より少ないコード行でこれを達成する別の方法を見つけました

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

一致メソッドが機能しない理由を理解するのに助けが必要ですか? どんな助けでも大歓迎です。みんなありがとう ：）

4

2 に答える 2

1

属性aのないを持っているので、を返します。より良いセレクターは、属性を持つものだけを選択する、です。href.attrundefined"#navlinks li a[href]"ahref

于 2012-12-20T05:34:53.117 に答える
0

A shorter one liner is as this:

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