jQuery-Zählelemente nach Klasse - wie lässt sich dies am besten implementieren?

373

Ich versuche, alle Elemente auf der aktuellen Seite mit derselben Klasse zu zählen und sie dann zu verwenden, um sie einem Namen für ein Eingabeformular hinzuzufügen. Grundsätzlich erlaube ich Benutzern, auf ein zu klicken <span>und dann ein weiteres hinzuzufügen, um mehr von derselben Art von Elementen zu erhalten. Aber ich kann mir keine Möglichkeit vorstellen, all dies einfach mit jQuery / JavaScript zu zählen.

Ich wollte das Element dann so nennen name="whatever(total+1)", wenn jemand eine einfache Möglichkeit dazu hat, wäre ich äußerst dankbar, da JavaScript nicht gerade meine Muttersprache ist.

— 133794m3r
quelle

3

Die erste Person, die ich sah, bekam es und ich wusste nicht, dass es eine einfache $ ('. classname'). Länge war, um es zu bekommen. Wenn ich mehr zu geben hätte, würde ich. Ich hätte nicht gedacht, es so zu versuchen. Ich habe ziemlich viele Variablen gesetzt und einfache Dinge wie das Anhängen von Dokumenten usw. usw. Wow, ich fühle mich jetzt ziemlich dumm, ich hätte nach dem Befehl .length () suchen sollen, um zu sehen, was er sagte ... danke an alle Übrigens.

— 133794m3r

26

+1 Für das

— Stellen

6

@jbnunn was ist Yoda?

— Shasi Kanth

691

Sollte nur so etwas sein wie:

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

Nebenbei bemerkt ist es oft vorteilhaft, die Eigenschaft length zu überprüfen, bevor viele Funktionsaufrufe für ein jQuery-Objekt verkettet werden, um sicherzustellen, dass tatsächlich einige Arbeiten ausgeführt werden müssen. Siehe unten:

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
quelle

4

Ich wollte nur children('div.classname').length

— mitteilen,

23

So einfach ist es, die Anzahl der Elemente zu ermitteln, die sich auf dieselbe Klasse beziehen

<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>

— Jonathan
quelle

14

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

— Max Shawabkeh
quelle

9

zum Zählen:

$('.yourClass').length;

sollte gut funktionieren.

Das Speichern in einer Variablen ist so einfach wie:

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

— Alastair Pitts
quelle

6

HTML:

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

JavaScript:

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

alert(numItems);

Geigen-Demo nur für innen div

— Nilesh Darade
quelle

2

Versuchen

document.getElementsByClassName('myclass').length

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

— Kamil Kiełczewski
quelle