Skip to main content

Jquery counting elements by class what is the best way to implement this?


Ok what i'm trying to do is to count all of the elements in the current page with the same class and then i'm going to use it to be added onto a name for a input form. Basically i'm allowing users to click on an and then by doing so add another one for more of the same type of items. But i can't think of a way to count all of these simply with jquery/javascript.



I was going to then name the item as something like name="whatever(total+1)", if anyone has a simple way to do this i'd be extremely grateful as javascript isn't exactly my native tongue and stack overflow usually has a ton of great answers and a great community so i'm hoping my query will not go unheard.


Source: Tips4allCCNA FINAL EXAM

Comments

  1. Should just be something like:

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

    ReplyDelete
  2. Getting a count of the number of elements that refer to the same class is as simple as this

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

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

    ReplyDelete
  4. for counting:

    $('.yourClass').length;

    should work fine.

    storing in a variable is as easy as:

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

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...