web-dev-qa-db-ja.com

クラスごとに要素を数えるjQuery - これを実装するための最良の方法は何ですか？

私がやろうとしているのは、同じクラスを持つ現在のページ内のすべての要素を数えることです。それからそれを入力フォームの名前に追加するために使います。基本的に私はユーザーが<span>をクリックすることを許可していますそしてそうすることによって同じ種類の項目のより多くのためにそれを追加することによって。しかし、これらすべてを単純にjQuery/JavaScriptで数える方法は考えられません。

誰かがこれをする簡単な方法を持っているならば私はそれからname="whatever(total+1)"のようなものとしてアイテムを命名しようとしていました、JavaScriptはまさに私の母国語ではないので私は非常に感謝します。

javascriptjquerycsselement
331
133794m3r

ちょうどのようなものでなければなりません：

// 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');
    });
}
616
PatrikAkerstrand

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

<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>
23
Jonathan
var count = $('.' + myclassname).length;
13
Max Shawabkeh

カウント用：

$('.yourClass').length;

うまくいくはずです。

変数に格納するのは簡単です：

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

8
Alastair Pitts

HTML：

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

JavaScript：

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

alert(numItems);

Fiddle内側のみのdivのデモ

6
Nilesh Darade

やってみる

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>
0
Kamil Kiełczewski