Count Dom element by class name in jQuery

Question

I need help getting element count by class name and data-date:

<td data-date="2017-11-10">
    <div class="animal">Mouse</div>
    <div class="animal">Dog</div>
</td>
<td data-date="2017-11-11">
    <div class="animal">Bird</div>
</td>
<td data-date="2017-11-12">
    <div class="animal">Cat</div>
    <div class="animal">Horse</div>
    <div class="animal">Snake</div>
    <div class="animal">Tiger</div>
</td>

Output

2017-11-10: 2
2017-11-11: 1
2017-11-12: 4

Thank you.

Answer 1

1. Loop each tr td.
2. Use .attr() to get the attribute
3. use .length to get the number of element with class

$('table tr td[data-date]').each(function() {
  var $this = $(this);



  console.log($this.attr('data-date') + " : " +
    $this.find('.animal').length)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
  <td>Not included td</td>
    <td data-date="2017-11-10">
      <div class="animal">Mouse</div>
      <div class="animal">Dog</div>
    </td>
    <td data-date="2017-11-11">
      <div class="animal">Bird</div>
    </td>
    <td data-date="2017-11-12">
      <div class="animal">Cat</div>
      <div class="animal">Horse</div>
      <div class="animal">Snake</div>
      <div class="animal">Tiger</div>
    </td>
     <td>Not included td</td>
  </tr>
</table>