使用 jQuery 迭代并有条件地隐藏多个元素

Question

if ( $("table tbody tr:visible").length === 0 ) { 
    $("table thead").hide();
} else {
    $("table thead").show();
}

我想隐藏具有 tbody 的所有 table 元素的 thead 元素，仅隐藏 tr 元素。上面的代码适用于一个 table，但不适用于多个 table。我有很多 table，此代码一次搜索所有 table 中的所有 tbody tr，而不是每个 table。

我是否需要获取 $("table").length 并检查每个是否可见 tr？有更简单的解决方案吗？

Answer 1

您必须能够识别您刚刚处理的 table。我们可以通过使用每个来做到这一点：

$("table").each(){
   var myTable = $(this);  
   if ( myTable.find("tbody tr:visible").length === 0) { 
      myTable.find("thead").hide(); 
   } 
   else { 
      myTable.find("thead").show();  
   }
}

Answer 2

您也可以在代码中没有显式循环的情况下完成此操作。 jQuery 的 :has() 选择器可以在一行中为您解决这个问题。

$("table:not(:has(tbody tr:visible)) thead").hide();

使用它，您可以直接查询其父表在其 tbody.

中不包含任何可见 tr 元素的所有 thead 元素

您可以在实际操作中看到这一点 here。

使用 jQuery 迭代并有条件地隐藏多个元素

Iterating and conditionally hiding multiple elements with jQuery

jquery

visible

is-empty