jquery - Display viewable <div> as counter -

i have carousel of divs , need display 'counter' of sorts - can display number of visible divs enough, want display visible as:

1-4 of 12

using jquery cycle, html is:

<div id="wrapper">  <div id="carousel1"> <div class=""></div> <div class=""></div> <div class=""></div> <div class=""></div> </div>  <div id="carousel2"> <div class=""></div> <div class=""></div> <div class=""></div> <div class=""></div> </div>  <div id="carousel3"> <div class=""></div> <div class=""></div> <div class=""></div> <div class=""></div> </div>  </div>  <div id="counter"></div> 

as can see, have 3 carousel panels... how use jquery count number of divs inside each panel , total number of these divs counter displays as:

1-4 of 12

thanks

one solution use jquery .map() , save each container child in array:

//the selector every div id starts carousel  //that ancestor of element id wrapper  var childlen = $("#wrapper div[id^='carousel']").map(function() {    return $(this).children().length;  }).get();  //outputs  [4, 4, 4]  console.log(childlen);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="wrapper">    <div id="carousel1">      <div class=""></div>      <div class=""></div>      <div class=""></div>      <div class=""></div>    </div>    <div id="carousel2">      <div class=""></div>      <div class=""></div>      <div class=""></div>      <div class=""></div>    </div>    <div id="carousel3">      <div class=""></div>      <div class=""></div>      <div class=""></div>      <div class=""></div>    </div>  </div>

references

.children()