Javascript 如果存在匹配行,则显示表组标题

Javascript 如果存在匹配行,则显示表组标题,javascript,jquery,Javascript,Jquery,我有一个由组标题组成的表,例如日期名称和值行。 过滤时,只显示某些值行,我想显示这些行的匹配组标题 group header [hidden] data [hidden] data [hidden] group header <-- (2) there is a row visible below, therefore show group header data [hidden] data [visible] <-- (1) this one is shown, look for

我有一个由组标题组成的表,例如日期名称和值行。 过滤时,只显示某些值行,我想显示这些行的匹配组标题

group header [hidden]
data [hidden]
data [hidden]
group header <-- (2) there is a row visible below, therefore show group header
data [hidden]
data [visible] <-- (1) this one is shown, look for the closest group header and show that one
group header <-- (2) there is a row visible below, therefore show group header
data [visible] <-- (1) this one is shown, look for the closest group header and show that one
data [hidden]
这在隐藏不需要的数据行之前可以正常工作,但在隐藏不需要的数据行之后不起作用。它适用于最后一个组,但不适用于所有组头


问题:如何在表中显示可见数据行的组标题与我的示例中不同的方法是可以的?

在第一步中,所有数据id行都是可见的,但尚未调用隐藏。 在第二次通过时,到星期一和星期二的下一行不可见

接下来可见的行是:

星期一第三排 星期二第二排四名
我的建议是将每个部分分组到一个自己的表中,以便最近的部分可以工作。

.prev不起作用,因为它只找到相邻的前一个匹配元素

两种不正确的方法:使用prev或nexist

// incorrect: this will only find *adjacent* siblings that are of class .newDay
$("tr[data-id]:visible").prev(".newDay").css("color","blue")

// incorrect: this will look for current element and then parents
$("tr[data-id]:visible").closest(".newDay").css("color","blue")
工作方法:结合使用PrevUtil和prev,不要过滤掉不需要的元素

$('tr[data-id]:visible') // select all visible data rows
  .prevUntil('.newDay') // select all previous data rows *excluding* .newDay
  .prev() // to get the .newDay: go back one (but some data rows are also still selected)
  .not("[data-id]") // filter out the data rows (so we are left with only .newDay)
  .css("color","blue") 

已更新,现在是工作示例。

我忘了添加prev将只查看上一个元素,如果元素与选择器不匹配,则不会查看树的上一个元素。不确定您的意思是什么?当我用$tr.newDay.hide启动JSFIDLE时,我得到了相同的效果。因此:.prev适用于可见和隐藏元素。这就是我所期望的。您可以从:$tr[data id]:visible.prev.newDay.csscolor开始,白色。这是在你叫隐藏之前。data id=0与:hidden不同,因此当您询问$tr[data id]:visible时,您要查找的是显示show的行,而不是data id=1的行。这正是我选择$tr[data id]:visible的原因。:-问题是prev只选择相邻的元素,我认为它将遍历兄弟元素,直到找到匹配项。
$('tr[data-id]:visible') // select all visible data rows
  .prevUntil('.newDay') // select all previous data rows *excluding* .newDay
  .prev() // to get the .newDay: go back one (but some data rows are also still selected)
  .not("[data-id]") // filter out the data rows (so we are left with only .newDay)
  .css("color","blue")