画像以外のaタグに_blankがあるときだけjQueryでアイコンを表示する：メモ

以前からなんとかできないものかと試していて、先日たまたまできたのでメモとして。もっと違うやり方もありそうですが…。

[追記]2014.3.29
この記事を書いた際に一応調べてみようと「not(:has(img))」で検索してみたところ、2010年の「外部リンクだけに新規ウィンドウ設定とアイコンを付加する」という記事を見つけました…。しかも雑誌に載っていたそうで…。

jQueryで画像以外のaタグに_blankがあるときだけアイコンを表示する

やりたいことは単純で、「外部リンクを別窓で開く際にアイコンを付けたい」です。ただし「画像を内包したリンクには付けたくない」という部分を満たす必要がありました。

ちなみにアイコンの表示は特定のclassを指定した部分に背景画像として表示させます。つまり、上記の条件を満たしたaタグにclassを付与できればOKとなります。

で、先日できたのが以下の指定方法です。

('a[target=_blank]:not(:has(img))').addClass('blank');

見たまんまですね。しかし、ここになかなか辿り着けませんでした..。

結び

[修正]2014.3.29
冒頭の理由で公開してすぐこの記事を引っ込めたのですが、ふと思い立って再度公開することにしました。なぜならば、件の記事を最初に探しあてられなかったからです。単純に検索に用いたワードの問題だったとは思いますが、それにしても見つかりませんでした。

なお、今回の件を検索する際に以下のような単語で検索していました。

• 「imgタグ 内包 aタグ」
• 「aタグで囲まれたimg　指定」
• 「img要素を含むaタグのみ」
• 「img要素を含むaタグ以外」
• 「jQuery 特定の要素　内包」
• 「特定のタグ　内包　除外 指定」
• etc…

思い出せるのはだいたいこんな感じかなと。

この記事に担わせたい役割は、こういうワードで検索した際に引っかかってくれることです。うまく行くかわかりませんしそもそも探してる方が他にいるのかもわかりませんが…。もしも私と同様のワードでさがされた方がいたら多少のお役に立てるかもしれません。

追記

このブログでも実装してみました。外部リンクには地蔵マークに「Go out」という文字を合わせたアイコンがつきます。この記事冒頭の注記にでていますね。

※アイコンのダウンロードは終了しました[2014.4.8追記]