web-dev-qa-db-ja.com

jQueryは特定のクラスのdivの数をカウントしますか？

このようなことを検討してください。

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

JQuery（または短い場合はプレーンJSを使用しますが、疑わしい）を使用して、「item」クラスのdivの数をどのようにカウントしますか？この例では、アイテムクラスには5つのdivがあるため、関数は5を返す必要があります。

ありがとう！

jqueryhtmlcount
53
user825286

Jquery 。length プロパティを使用できます

var numItems = $('.item').length;
112
Brian Glaz

パフォーマンスを向上させるには、次を使用する必要があります。

_var numItems = $('div.item').length;
_

divのDOM要素のみを検索し、高速になるためです。

提案：lengthプロパティの代わりにsize()を使用すると、SIZE()はlengthプロパティを使用するため、処理の1つの追加ステップ関数定義と結果を返します。

18
Ghazanfar Mir

JQuery.childrenプロパティを使用できます。

var numItems = $('.wrapper').children('div').length;

詳細については http://api.jquery.com/ を参照してください

10
Nikhil salwe

そして、誰もが興味を持っているかもしれない場合、単純なjsの答えのために;

var count = document.getElementsByClassName("item");

乾杯。

リファレンス： https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

2
Pax Vobiscum

JQueryサイズ関数を使用してこのjs関数を作成しました http://api.jquery.com/size/

function classCount(name){
  alert($('.'+name).size())
}

ドキュメント内でクラス名が出現する回数を警告します。

2
Vlad
<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .test {
                background: #ff4040;
                color: #fff;
                display: block;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div class="test"> one </div>
        <div class="test"> two </div>
        <div class="test"> three </div>
        <div class="test"> four </div>
        <div class="test"> five </div>
        <div class="test"> six </div>
        <div class="test"> seven </div>
        <div class="test"> eight </div>
        <div class="test"> nine </div>
        <div class="test"> ten </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {
            //get total length by class
            var numItems = $('.test').length;
            //get last three count
            var numItems3=numItems-3;         


            var i = 0;
            $('.test').each(function(){
                i++;
                if(i>numItems3)
                {

                    $(this).attr("class","");
                }
            })
        });
    </script>
    </body>
    </html>
0
Pratik Shah