javascript - 计算特定 div 中表中的可见行数

Question

我有两个唯一的 div ID，其中有一个相同的表 ID。

<div id = 'currentItems'><table id = 'allItems'></table></div>

正在显示当前表格

<div id = 'newItems'><table id = 'allItems'></table></div>

正在显示刷新的表格(通过 jquery 加载)

我目前有这个 jquery 函数，它可以抓取所有可见的表行。它工作得很好，除了我有两个具有相同 ID 的表。

 var countVisibleRows = $('tr').filter(function() {
     return $(this).css('display') !== 'none';
 }).length;

有什么方法可以指定上述函数只在 div id = 'newItems' 中查找可见的 TR？请记住，div 和表格可能是隐藏的，我只想计算将可见的行数。

Answer 1

所以使用div id和visible选择器

var trsC = $('#currentItems table tbody tr:visible')
console.log(trsC.length);
var trsN = $('#newItems table tbody tr:visible')
console.log(trsN.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="currentItems">
  <table>
    <tbody>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr hidden><td>3</td></tr>
      <tr><td>4</td></tr>
    </tbody>
  </table>
</div>


<div id="newItems">
  <table>
    <tbody>
      <tr><td>5</td></tr>
      <tr hidden><td>6</td></tr>
      <tr hidden><td>7</td></tr>
      <tr><td>8</td></tr>
    </tbody>
  </table>
</div>