クラスごとのjQuery要素のカウント-これを実装する最良の方法は何ですか？

373

私がやろうとしていることは、現在のページのすべての要素を同じクラスでカウントし、それを使用して入力フォームの名前に追加することです。基本的に、私はユーザーがaをクリックすることを許可しています。<span>そうすることで、同じタイプのアイテムの別のものを追加できます。しかし、jQuery / JavaScriptでこれらすべてを単純にカウントする方法を考えることはできません。

次に、アイテムにのような名前を付けます。name="whatever(total+1)"誰かがこれを行う簡単な方法を持っている場合、JavaScriptは私の母国語ではないので、とても感謝しています。

— 133794m3r
ソース

3

最初に見た人はそれを手に入れましたが、それが簡単な$（ '。classname'）。lengthであるとは知りませんでした。与えるものがもっとあったらそのようにしようとは思わなかった。私は変数をかなり設定していて、ドキュメントの追加などのように単純なことをしています。すごく馬鹿げた感じになりました。.length（）コマンドを探して、それが何を言っているかを確認することを考えるべきでした...みんなのおかげでところで。

— 133794m3r 2010

26

+1ヨーダのような質問をするため

— jbnunn

6

@jbnunn依田とは？

— shasi kanth 2014年

691

次のようにする必要があります：

// Gets the number of elements with class yourClass
var numItems = $('.yourclass').length

補足として、jQueryオブジェクトで多くの関数呼び出しをチェーンする前にlengthプロパティをチェックして、実際に実行する作業があることを確認することはしばしば有益です。下記参照：

var $items = $('.myclass');
// Ensure we have at least one element in $items before setting up animations
// and other resource intensive tasks.
if($items.length)
{
  $items.animate(/* */)
    // It might also be appropriate to check that we have 2 or more
    // elements returned by the filter-call before animating this subset of 
    // items.
    .filter(':odd')
      .animate(/* */)
      .end()
    .promise()
    .then(function () { 
       $items.addClass('all-done');
    });
}

— PatrikAkerstrand
ソース

4

ただ、それは私がここに上陸したとき、私がやったものだとして、これはまた、要素のカウント子供たちと働くことを共有したいと思った： children('div.classname').length

— brs14ku

23

同じクラスを参照する要素の数を取得することは、これと同じくらい簡単です

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                alert( $(".red").length );
            });

        </script>
    </head>
    <body>

        <p class="red">Test</p>
        <p class="red">Test</p>
        <p class="red anotherclass">Test</p>
        <p class="red">Test</p>
        <p class="red">Test</p>
        <p class="red anotherclass">Test</p>
    </body>
</html>

— ジョナサン
ソース

14

var count = $('.' + myclassname).length;

— マックスシャワブケ
ソース

9

カウント用：

$('.yourClass').length;

正常に動作するはずです。

変数への格納は次のように簡単です。

var count = $('.yourClass').length;

— アラステア・ピッツ
ソース

6

HTML：

<div>
    <img src='' class='class' />
    <img src='' class='class' />
    <img src='' class='class' />
</div>

JavaScript：

var numItems = $('.class').length; 

alert(numItems);

内部のみのdivのフィドルデモ

— ニレシュ・ダレード
ソース

2

試す

document.getElementsByClassName('myclass').length

コードスニペットを表示

let num = document.getElementsByClassName('myclass').length;
console.log('Total "myclass" elements: '+num);

.myclass { color: red }

<span class="myclass" >1</span>
<span>2</span>
<span class="myclass">3</span>
<span class="myclass">4</span>

スニペットを展開

— カミル・キエチェフスキ
ソース