it-swarm.com.de

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

Ich versuche, alle Elemente auf der aktuellen Seite mit derselben Klasse zu zählen, und dann verwende ich sie, um sie einem Namen für ein Eingabeformular hinzuzufügen. Grundsätzlich erlaube ich Benutzern, auf einen <span> zu klicken und auf diese Weise einen weiteren hinzuzufügen, um weitere Elemente desselben Typs zu erhalten. Aber mir fällt keine Möglichkeit ein, all dies einfach mit jQuery/JavaScript zu zählen.

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

351
133794m3r

Sollte einfach so aussehen:

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




Als Randnotiz ist es oft hilfreich, die Eigenschaft length zu überprüfen, bevor viele Funktionsaufrufe für ein jQuery-Objekt verkettet werden, um sicherzustellen, dass tatsächlich etwas Arbeit zu erledigen ist. 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');
    });
}
647

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

<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

zum Zählen:

$('.yourClass').length;

sollte gut funktionieren.

das Speichern in einer Variablen ist so einfach wie:

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 Demo nur für drinnen div

6
Nilesh Darade

versuchen

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