在jQuery中按类名统计Dom元素

时间:2017-11-02 02:31:09

标签: 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

谢谢。

4 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:1)

您可以使用解决方案

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

console.log(collection);
&#13;
<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>
&#13;
&#13;
&#13;

希望这会对你有所帮助。

答案 2 :(得分:0)

循环并使用数据并找到

&#13;
&#13;
var counts = {}
$("td").each( function (i, td) {
   var $td = $(td) 
   counts[$td.data("date")] = $td.find("div").length
})
console.log(counts);
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

你可以尝试这样的事情:

PrintWriter pw = null;
if (appendToFile) {
  pw = new PrintWriter(new FileWriter(filename, true));
} else {
  pw = new PrintWriter(new FileWriter(filename));
}