[jQuery] eachでリストの要素数を数える

jQueryを使ってリストの数を数えてみます。

jQueryにはeachメソッドというものが用意されており、これを使うと簡単に処理できます。

eachメソッド

eachメソッドは要素を１つずつ処理します。

XHTML

<ul class="sample">
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
  <li>eee</li>
</ul>

</ul>

HTMLはulとliを使ったシンプルなリストになります。ulのクラス名はsampleに設定します。

表示

HTMLを表示するとこのようになります。

jQuery

<script type="text/javascript">
$(function () {
    var counter = 0;
    $('.sample li').each(function () {
        counter++;
    });
    alert(counter);
});
</script>

$(function () {

var counter = 0;

$('.sample li').each(function () {

counter++;

});

alert(counter);

});

</script>

$(‘.sample li’).each(function () {}でクラス名sampleの中のli要素を１つずつ処理します。
１個処理するごとにカウンターの数を１ずつ上げていきます。

アラートで要素の数を表示させます。

結果

今回はリスト数が５なので、「5」と表示され、プログラムが正しく動いているのが確認できます。

SearchLight

[jQuery] eachでリストの要素数を数える

eachメソッド

Categories

アーカイブ

最近の投稿

SearchLight

[jQuery] eachでリストの要素数を数える

eachメソッド

Categories

タグ

アーカイブ

人気記事

最近の投稿