javascript - 在 jQuery 中按类名对 Dom 元素进行计数

标签 javascript jquery css dom classname

我需要帮助按类名和数据日期获取元素计数:

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

输出

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

谢谢。

最佳答案

  1. 循环每个 tr td。
  2. 使用.attr()获取属性
  3. 使用.length获取类的元素数量

$('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>

关于javascript - 在 jQuery 中按类名对 Dom 元素进行计数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47066647/

相关文章:

javascript - javascript类中的静态异步函数

javascript - IE8关于Jquery定位的问题

javascript - 在 Angular 7 中,如何从英语 (LTR) 加载阿拉伯语 (RTL) 的 CSS

php - 使用 jQuery 更改对象上的类不允许我执行新类的 onClick 事件

html - 在 UP 中居中包含更多 li 元素的 li 元素并将文本左右对齐

css - DIV 在移动设备上不显示为 block

javascript - React - 如何根据另一个中的选择填充两个下拉列表

javascript - 出现灯箱时阻止滚动

javascript - 如果未选择,如何验证此选择选项?

javascript - 是否有接近位置 : Relative-Fixed? 的任何东西