web-dev-qa-db-fra.com

jQuery compte le nombre de div avec une certaine classe?

Considérant quelque chose comme ça;

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

Comment pourrais-je, en utilisant jQuery (ou JS simple, s'il est plus court - mais j'en doute) le nombre de div avec la classe "item"? Dans cet exemple, la fonction doit renvoyer 5, car il y a 5 divs avec la classe d'élément.

Merci!

jqueryhtmlcount
48
user825286

Vous pouvez utiliser la propriété jquery .length

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

Pour de meilleures performances, vous devez utiliser:

var numItems = $('div.item').length;

Puisqu'il cherchera seulement les éléments div dans DOM et sera rapide.

Suggestion: utiliser size() au lieu de length signifie une étape supplémentaire dans le traitement car SIZE() utilise la propriété length dans la définition de la fonction et renvoie le résultat.

17
Ghazanfar Mir

Vous pouvez utiliser la propriété jQuery.children.

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

pour plus d'informations, consultez http://api.jquery.com/

10
Nikhil salwe

Je viens de créer cette fonction js en utilisant la fonction de taille jQuery http://api.jquery.com/size/

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

Il signale le nombre de fois où le nom de la classe apparaît dans le document.

2
Vlad

Et pour la plaine js répondre si quelqu'un pourrait être intéressé;

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

À votre santé.

Référence: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

1
Pax Vobiscum
<!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