jQuery 特定要素が存在する場合に処理を実行する

自分用にWEBデザインのギャラリーサイトを作成しています。

WCG (Web Catalog Gift)

特定要素の存在有無により表示/非表示を切り替えたい場面があったので処理の仕方を検索。
自分としては見慣れない指定方法だったため忘れないようにメモ。

このサイトはTumblrベースで作成しており、TumblrにはReblogとLikeという機能があります。
Reblogは自分のTumblrページに他のTumblrユーザーの投稿内容を引用する機能。
LikeはFacebookで言うところの「いいね!」です。

自分の投稿が他のTumblrユーザーからRebleg/Likeされると
その投稿のパーマリンクページに動的にRebleg/Likeされたと分かるようにリンクが追加されます。(テンプレートによりますが。。)
Reblog、Likeはあくまでも他のTumblrユーザーが自分の投稿に対してするかしないかに依存するため、常に表示されているわけではありません。

そのため、Rebleg/Likeのどちらかをされたときのみ表示領域を作るように条件判断をさせたい場面に出くわします。
jQueryで対象の要素を検索し、存在していれば表示、存在がなければ非表示と分岐させれば実現可能と思いGoogle検索。
以下のページを見つけました。

jQueryによる要素の存在チェックまとめ: 小粋空間

上記リンク先では5つの方法が取り上げられていますが、
今回は1つ目のチェック方法を利用しました。

TumblrではReblog、Likeがされた投稿にリスト(ul、li)でReblog/Likeのリンクを作成する仕様になっています。

WCGではdiv.postnotesというクラスの中にReblog/Like用のリストを作成するようにしているため
上記クラス内にul要素が存在した場合にdiv.postnotesを.show()メソッドで表示、存在しない場合は.hide()メソッドで非表示にするようにしました。
以下のコードで実現しています。

$(function () {
    if($("div.postnotes ul")[0]) {
        $("div.postnotes").show();
    } else {
        $("div.postnotes").hide();
    }
});

通常のセレクター指定の直後に[0]を追加することで、そのセレクターに該当する要素の0番目があるかどうかをチェックすることができるという解釈です。

動的に要素が生成されるかつ、存在するか存在しないかを判断する場面で重宝する方法だと思います。

コメント

タイトルとURLをコピーしました