如何为jQuery筛选后可见的DOM元素添加data-filtred属性？

我来帮你搞定这个问题！你遇到的核心问题是筛选切换元素可见性后，没能正确给可见元素添加上data-filtred="true"属性，而且原代码里还有几个小细节导致功能失效，咱们一步步来修正。

先看你的演示代码问题分析 #

原演示代码里有两个关键问题：

1. 遍历.my-divs容器时，内部又用jQuery(".my-divs div")会全局选择所有容器里的div，导致重复操作，效率低还容易出错
2. 没有清除之前的data-filtred属性，如果多次执行筛选，旧属性会残留，状态不准确

修正后的演示代码 #

jQuery(document).ready(filter);
function filter() {
  // 遍历每个.my-divs容器，确保操作只针对当前容器内的元素
  jQuery(".my-divs").each(function () {
    const $currentContainer = jQuery(this);
    const $allDivs = $currentContainer.find("div");

    // 筛选并切换可见性，同步设置属性
    $allDivs.each(function () {
      const $div = jQuery(this);
      const isVisible = $div.text() <= 3;
      // 直接切换可见状态
      $div.toggle(isVisible);
      // 同步设置/移除属性，不用事后再遍历
      if (isVisible) {
        $div.attr("data-filtred", "true");
      } else {
        $div.removeAttr("data-filtred");
      }
    });
  });
}

.my-divs div { 
  display:block; 
  padding:10px; 
  border:1px solid #eaeaea; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="my-divs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<hr>
<div id="2" class="my-divs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

再处理你的业务代码（针对tr元素） #

你的业务代码里同样存在全局选择tr的问题，而且事后遍历判断:visible的方式不够可靠（比如元素可能因为父容器隐藏被误判），咱们直接在判断可见性的逻辑里同步设置属性：

修正后的业务筛选函数 #

function filter() {
  // 先确认from和to是已经定义好的有效时间戳变量
  jQuery(".my-divs").each(function () {
    const $currentContainer = jQuery(this);
    const $allTrs = $currentContainer.find("tr");

    $allTrs.each(function () {
      const $tr = jQuery(this);
      // 获取时间戳，避免重复计算
      const baseTimestamp = new Date($tr.find('td.date').data('basedate')).getTime();
      // 判断是否在时间范围内
      const isVisible = baseTimestamp >= from && baseTimestamp <= to;

      // 切换可见状态
      $tr.toggle(isVisible);
      // 同步设置属性
      if (isVisible) {
        $tr.attr("data-filtred", "true");
      } else {
        $tr.removeAttr("data-filtred");
      }
    });
  });
}

关键改进点说明 #

• 限定操作范围：用$currentContainer.find()代替全局选择，确保只操作当前容器内的元素，避免跨容器干扰
• 同步状态更新：在判断元素是否可见的同时直接设置/移除属性，不用事后再遍历一次，效率更高，也避免了:visible选择器的潜在问题
• 清除旧属性：移除不符合条件元素的data-filtred属性，确保每次筛选后的状态都是准确的

内容的提问来源于stack exchange，提问作者prc