2010-04-28 8 views
284

Was ich versuche zu tun, ist, alle Elemente auf der aktuellen Seite mit der gleichen Klasse zu zählen, und dann werde ich es verwenden, um auf einen Namen für ein Eingabeformular hinzugefügt werden. Grundsätzlich erlaube ich Benutzern, auf einen <span> zu klicken und dann fügen Sie einen anderen für mehr von der gleichen Art von Einzelteilen hinzu. Aber ich kann mir keinen Weg vorstellen, all dies einfach mit jQuery/JavaScript zu zählen.jQuery Elemente nach Klassen zählen; Was ist der beste Weg dies zu implementieren?

Ich würde dann den Artikel als etwas wie name="whatever(total+1)" nennen, wenn jemand eine einfache Möglichkeit hat, dies zu tun, wäre ich sehr dankbar, da JavaScript nicht genau meine Muttersprache ist.

+2

die erste Person, die ich es komme, sah und ich wusste nicht, dass es ein einfacher $ ist (‚classname‘). Länge zu bekommen. Wenn ich mehr zu geben hätte, würde ich es tun. Dachte nicht, es so zu versuchen. Ich habe Variablen ziemlich viel und einfache Dinge wie das Anhängen von Dokumenten etc. gesetzt. Wow, ich fühle mich ziemlich dumm jetzt sollte ich gedacht haben, nach dem .length() Befehl zu suchen, um zu sehen, was es sagte ... danke für alle anderen. – 133794m3r

+15

+1 Für eine Frage wie Yoda – jbnunn

+4

@jbnunn was ist Yoda? –

Antwort

520

Sollte nur so etwas wie:

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




Als Randbemerkung, ist es oft von Vorteil ist, die Länge Eigenschaft zu überprüfen, bevor eine Menge Funktionen Verkettungs fordert ein jQuery-Objekt, um sicherzustellen, dass wir tatsächlich etwas zu erledigen haben. 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'); 
    }); 
} 
+2

Ich wollte nur teilen, dass dies auch mit dem Zählen von Kindern eines Elements funktioniert, denn das war, was ich tat, als ich hier landete: 'children ('div.classname'). Length ' – brs14ku

+0

Sicher keine gute Lösung, aber perfekt für OP. –

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

zum Zählen:

$('.yourClass').length;

sollte gut funktionieren.

in einer Variablen zu speichern ist so einfach wie:

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

22

eine Zählung der Anzahl der Elemente erhalten, die zur selben Klasse verweist so einfach wie dieser

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

HTML:

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

JavaScript:

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

alert(numItems); 

Fiddle demo for inside only div

Verwandte Themen