【JS】定義リスト/記述リスト（dl, dd）タグの個数をカウントするスクリプトをjQueryで作ってみた

2018/01/05 2018/09/10

このブログの一番人気記事である「三文字略語」のページには現在何個の略字を載っけたのか数えたくなったのですが、いちいち自分で数えるのもバカらしく感じたのでプログラムにやらせてみようと作ってみました。また違うところで使えそうだったので、スクリプト内容を備忘録代わりにポストしておきます。

定義リストの個数をカウントするスクリプト

単純にlengthで数えることにしました。
jQueryを先に読み込ませてください。

<script>
$(function() {
    var cnt = $('dd').length;
    $('.kosu').text(cnt + '個');
});
</script>

$(function() {

var cnt = $('dd').length;

$('.kosu').text(cnt + '個');

});

</script>

たかだか4行のスクリプトですが、しっかりと動きました。

上に書いたままだと、ページ内の全ての dd タグの個数を出力されるので、対象タグをラップするボックスを用意した方が良さそうです。
三文字略語のページでは sanmoji というクラス名の div タグでラップしました。

デモはこちらから。

: 【JS】チェックボックスでフォームの disabled を設定/解除するスクリプトをjQueryで組んでみた

チェックボックスでフォームのdisabledを制御するjQueryのスクリプトを作成したので忘備録としてポストします。

: jQueryでロールオーバーのスクリプトを組んでみた

jQueryの勉強として、マウスカーソルが乗った時にアニメーション（フェードイン、フェードアウト）しながら切り替わる「ふんわりロールオーバープラグイン」を作成してみました。

: 【JS】リセットボタン押下時にフォーム入力値・選択値をリセット、クリアする方法

検索条件などをフォームに記述・選択後、GET方式で引き継いでいる時、HTMLにある普通のリセットボタンではデータは初期化されません。そこで、jQueryを使ってデータを初期化するというイメージのスクリプトを作ってみましたのでご紹介。

: 【JS】タイトルタグを利用したツールチッププラグイン「jquery.tgHoverToolTip」をjQueryで作ってみた

以前作成したツールチップを拡張し、クリックではなくマウスオーバーでポップアップするようにしてみました。クリック版ではリンクタグを利用していたためにボタンに埋め込んだりは出来なかったのですが、titleタグを利用する形式にしたため、リンクの他にも使えるようにもなっています。