: javascript

jQuery を使って色々くっつけちゃおう

ちょっとした jQuery コーデングハック

jQueryを使って、リンクの前とか後ろとかに、矢印とかアイコンとかくっつけてみたら、思いのほかコーディングが楽になる。だから、くっつける系のAPIを調べてみよう。今回は「after (content) 」、「before (content)」、「append (content)」,「after (content)」をピックアップ。

jQueryは便利!!

今更すぎる程今更ですが、jQueryを使って繰り返しやってるような処理をすれば、コーディングがちょっとだけ楽になりますよね。

あと、HTMLにデザイン上止むなく不要なタグをつけるのもなんだか、スマートじゃないし気持ち悪いなぁって思ってる人も多いかも。じゃあ、ちょっとだけその問題をjQueryで解消してみましょう。

after(content) で後ろにくっつける

after(content)を使うとコンテンツ(.target-after)の後ろに任意のなにかがくっつきます。

PDFリンクの後にPDFアイコンとかをつける時に使ったりしています。

このサイトだと、上のパン屑リストとかにつかってますね。リンクがあれば後ろに「」がくっつくようになってます。リンクが矢印にかかりたくなかったので、これを使いました。

$(function() {
  $(".target-after").after('<p>任意のなにか</p>');
});

before(content) で前にくっつける

before(content) を使うとコンテンツ(.target-before)の前に任意のなにかがくっつきます。

フッターの前とかに「ページの先頭へ」的なものをつける時とかに使ったりしてます。

$(function() {
  $(".target-before").before('<p>任意のなにか</p>');
});

append(content) でコンテンツ内後方にくっつける

append(content) を使うとコンテンツ(.target-append)内の後ろに任意のなにかがくっつきます。

別窓が開くようなリンクの最後にアイコンをくっつける時なんかに使っています。

このサイトだと、下の「参考文献」とかにつかってますね。リンクは別窓が開くようにしてあるので後ろに「」がくっつくようになってます。

$(function() {
  $(".target-append").append('<p>任意のなにか</p>');
});

prepend(content) でコンテンツ内前方にくっつける

prepend(content) を使うとコンテンツ(.target-prepend)内の前に任意のなにかがくっつきます。

別窓が開くようなリンクの最後にアイコンをくっつける時なんかに使っています。

このサイトだと、上のタイトルのタグとかにつかってますね。リンク内前方に「」がくっつくようになってます。リンクで囲いたかったので、これを使いました。

$(function() {
  $(".target-prepend").prepend('<p>任意のなにか</p>');
});

もっとコーディングを自由に出来る………気になる。

いかがでしょうか?とてもシンプルで簡単なコードをちょろっと書くだけで、コーディングなんかが楽になりますよね。あとは、アイデア次第で使い方はもっと出てくると思います。

今回は、僕がよく使う「after(content) 」、「before(content)」、「append(content)」,「after(content)」だけのご紹介ですが、まだまだ色々便利なAPIはあるので、今後ご紹介して行きます。