Использование jQuery каждой функции для подсчета div с одним и тем же классом

Question

Я создал класс css для 8 делений, мне нужно использовать каждую функцию jquery, чтобы подсчитать число делений и показать результат в html страницы, например: «Появилось 8 делений».

Я создал код, но он не работает, он не показывает результат.

код:

 <script>
    $( ".class" ).each(function( index ) {
      console.log( index + ": " + $( this ).text() );
    });
    </script>

Answer 1

если вы просто хотите их посчитать, вы можете сделать: $('.class').length

Answer 2

После нескольких попыток мне удалось решить проблему.

Я создал три кода, и они сработали и дали мне желаемый результат. Большое спасибо за помощь.

1.

    var totalPageProducts;
jQuery('.products-grid .item').each(function(index, value) {
totalPageProducts = index + 1;
jQuery('.show-no').html('Showing '+ totalPageProducts +' products');
});

2.

jQuery(document).ready(function($) {
    jQuery('.show-no').html('Showing '+ jQuery('.products-grid .item').length +' products');
});

3.

jQuery('.show-no').html('Showing '+ jQuery('.products-grid .item').length +' products');

Answer 3

Из each() метода, чтобы получить целый класс divs index + content или Вы хотите посчитать, сколько div имеет один и тот же класс, затем просто используйте .length.

Примечание: установите флажок Full page., тогда вы сможете увидеть те же самые div классов count result.

// Console inded with each div text.
$('.sameclass').each(function(index){
  console.log(index +':'+ $(this).text());
});

//Count How many divs has (sameclass) class. 
$('.result').text($('.sameclass').length);

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<div class="sameclass">Text #1</div>
<div class="sameclass">Text #2</div>
<div class="sameclass">Text #3</div>
<div class="sameclass">Text #4</div>
<div class="sameclass">Text #5</div>
<div class="sameclass">Text #6</div>
<div class="sameclass">Text #7</div>
<div class="sameclass">Text #8</div>
<hr>
<p>Total divs has (sameclass): <strong class="result"></strong></p>