如何在jQuery中结合查找/过滤函数筛选符合offsetWidth<scrollWidth的元素

我来帮你搞定这个问题，先说说你代码里的两个关键问题，再给你完整的解决方案：

1. 先修正元素选择的错误 #

你之前用attr("role", "row")的方式完全错了——这个方法是给元素设置属性值，不是筛选带有该属性的元素！要筛选符合条件的元素，应该用属性选择器[role="row"]，这样能直接定位到目标元素，效率也更高。

修正后的元素选择代码：

// 直接通过属性选择器筛选tr和th
var elements = $("#Grid").find('tr[role="row"]').first().find('th[role="columnheader"]');

如果你更习惯用filter()方法，也可以这么写：

var elements = $("#Grid")
  .find("tr")
  .filter('[role="row"]') // 筛选带role="row"的tr
  .first()
  .find("th")
  .filter('[role="columnheader"]'); // 筛选带role="columnheader"的th

2. 修复筛选条件的问题 #

你在filter()里用$(this).offsetWidth是无效的，因为offsetWidth和scrollWidth是DOM元素的原生属性，不是jQuery对象的属性。你需要直接访问原生DOM节点（也就是this）来获取这些值。

如果不用你现有的函数，直接写筛选逻辑的话：

var filtered = elements.filter(function () { 
  return this.offsetWidth < this.scrollWidth; 
});

3. 结合你已有的isEllipsisActive函数 #

既然已经有了判断函数，直接在filter()里调用它就行，只要把当前的DOM元素（this）传进去：

function isEllipsisActive(e) { 
  return (e.offsetWidth < e.scrollWidth); 
}

var filtered = elements.filter(function () { 
  return isEllipsisActive(this); 
});

完整的可运行代码 #

把所有部分整合起来就是：

// 判断元素是否显示省略号的工具函数
function isEllipsisActive(e) { 
  return (e.offsetWidth < e.scrollWidth); 
}

// 1. 定位目标元素
var targetThElements = $("#Grid")
  .find('tr[role="row"]').first()
  .find('th[role="columnheader"]');

// 2. 筛选出满足条件的元素
var filteredElements = targetThElements.filter(function () { 
  return isEllipsisActive(this); 
});

再帮你复盘下原代码的问题 #

• 用attr(key, value)设置属性而非筛选元素，导致你拿到的根本不是你想要的目标节点集合；
• 错误地从jQuery对象上访问原生DOM属性，导致筛选条件始终不成立。

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