在jQuery中按类名计算Dom元素

Posted 2023-03-16

【中文标题】在jQuery中按类名计算Dom元素

【英文标题】：Count Dom element by class name in jQuery

【发布时间】：2018-04-14 11:11:48

【问题描述】：

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

<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

谢谢。

【问题讨论】：

会有多个元素具有相同的data-date 值吗？

【参考方案1】：

循环每个 tr td。 使用.attr()获取属性 使用.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>

【讨论】：

使用 $('[data-date]') 之类的选择器而不是 $('td') 可能会更好，这样只会选择相关的 TD 元素，而不是页面上的所有 TD。 （显然 OP 没有显示任何其他 TD，但真实页面可能有其他表格。）

感谢大家的超快速响应！欣赏它。

@ombinar 很高兴帮助 mate 快乐编码

【参考方案2】：

给你一个解决方案

var collection = ;
$('td').each(function()
  collection[$(this).data('date')] = $(this).children('div.animal').length;
);

console.log(collection);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <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>
  </tr>
</table>

希望这会对你有所帮助。

【参考方案3】：

循环使用数据并查找

var counts = 
$("td").each( function (i, td) 
   var $td = $(td) 
   counts[$td.data("date")] = $td.find("div").length
)
console.log(counts);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <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>
  </tr>
</table>

【参考方案4】：

你可以试试这样的：

$("td").each(function() 
  console.log( $(this).prop('data-date') + ": " + $(this).children().length );
);