Wie kann ich die Anzahl der Elemente mit derselben Klasse?

Ich habe ein main-div in meiner Seite mit einem bestimmten id. Nun, einige Eingabe-Elemente in der gleichen Klasse vorhanden sind, in diesem div. Also, wie kann ich die Anzahl dieser Elemente der gleichen Klasse in diesem div mit jQuery?

  • Auf welches Ereignis? DOM-bereit, auf laden klicken..?
InformationsquelleAutor manishjangir | 2012-03-13
  1. 89

    Mit jQuery kann man einfach

    $('#main-div .specific-class').length

    sonst mit reinem js (von IE8 im Lieferumfang enthalten) können Sie einfach schreiben

    document.querySelectorAll('#main-div .specific-class').length;
    • Mit reinem JS und in compliant/moderne Browser, die Sie verwenden könnten querySelectorAll().
    • ja, ich erwähnt es nur einige Sekunden später 🙂
    • Mein Punkt war, nachdem Sie es erwähnt, und war wirklich eine Vorsicht, die qSA() ist nur in neueren Browsern.
    • Kann mir jemand zeigen, wie Sie mithilfe der jQuery-Beispiel mit einer variable? Ich habe versucht, ein paar Dinge sind aber noch nicht bekommen, es funktioniert noch. Ich dachte, es wäre wie console.log($(container_variable '.remove_element').length);
    • Firgured es aus: console.log($('#'+container_variable+' .remove_element').length);
    • Nach 5 Jahren hat sich Ihre Antwort sparen meine Zeit. Danke Kumpel
    • Nach unten Stimmen, nur weil es unnötig erfordert die Installation eines Drittanbieter-tool (jQuery), wenn plan-JS wird es für Sie tun-Dokument.getElementsByClassName("classstringhere").Länge
    • Sie sollten alle Lesen die Antwort dann. Und die Frage ist getaggt mit jQuery, falls Sie es nicht bemerkt. Ich gab beiden die Lösung.

    InformationsquelleAutor fcalderan
  2. 5
    $('#maindivid').find('input .inputclass').length
    InformationsquelleAutor sandeep
  3. 4

    Erhalten Sie auf den übergeordneten Knoten und dann alle Knoten Abfragen mit der Klasse, die durchsucht wird. dann erhalten wir die Größe

    JS:

    var parent = document.getElementById("parentId");
var nodesSameClass = parent.getElementsByClassName("test");
console.log(nodesSameClass.length);

    HTML:

    <div id="parentId">
  <p class="prueba">hello word1</p>
  <p class="test">hello word2</p>
  <p class="test">hello word3</p>
  <p class="test">hello word4</p>
</div>

    InformationsquelleAutor x-rw
  4. 3

    document.getElementsByClassName("classstringhere").length

    Den document.getElementsByClassName("classstringhere") - Methode gibt ein array aller Elemente mit dieser Klasse Namen, so .length erhalten Sie den Betrag von Ihnen.

    • Dies ist die einzige Antwort, die eigentlich die Frage beantwortet. Warum ist das nicht #1?
    InformationsquelleAutor Sheshank S.
  5. 1

    Einfachste Beispiel:

    JS:

    document.getElementById("demo").innerHTML = "count: " + document.querySelectorAll('.test').length;

    HTML:

    <html>
    <body>
    
    <p id="demo"></p>
    <ul>
      <li class="test">Coffee</li>
      <li class="test">Milk</li>
      <li class="test">Soda</li>
    </ul>

 </body> 
 </html>

    InformationsquelleAutor Lunar Sutar
  6. 0

    Ich würde gerne schreiben explizit zwei Methoden, die es erlauben, dies zu erreichen in reinem JavaScript:

    document.getElementsByClassName('realClasssName').length

    Hinweis 1: Argument dieser Methode muss ein string mit den echten Klassennamen, ohne den Punkt am Anfang dieser Zeichenfolge.

    document.querySelectorAll('.realClasssName').length

    Hinweis 2: Argument dieser Methode muss ein string mit den wirklichen Klassen-Namen, aber mit dem Punkt zu Beginn der Zeichenkette.

    Hinweis 3: Diese Methode funktioniert auch mit anderen CSS - Selektoren, nicht nur mit class-Selektor. So es ist mehr universal.

    Schreibe ich auch eine Methode, aber mit zwei Namen-Konventionen um dieses problem zu lösen mit jQuery:

    jQuery('.realClasssName').length

    oder

    $('.realClasssName').length

    Hinweis 4: Hier haben wir auch zu denken Sie daran, über den Punkt vor dem Klassennamen, und wir können auch andere CSS Selektoren.

    InformationsquelleAutor simhumileco
Schreibe einen Kommentar