如何通过jQuery查找含指定属性值元素并为对应表格设置红色边框

我来帮你修正代码里的问题，顺便给你两种更靠谱的实现方式：

先说说你原代码的两个核心问题 #

• 属性选择器写法错误：has('giveBorder="yes"') 不是有效的jQuery选择器，要匹配带指定属性值的元素，得用 [属性名="属性值"] 的格式，也就是 input[giveBorder="yes"]
• 父元素获取逻辑反了：你是在遍历div元素，而table是div的子元素，不是父元素，所以不能用parent('table')，得用find('table')来获取div内部的表格

方式一：遍历div元素逐一检查 #

这种方式和你原本的遍历思路一致，修正逻辑后代码如下：

// 遍历页面所有div元素
$('div').each(function() {
  // 获取当前div下的表格元素
  const $targetTable = $(this).find('table');
  // 检查表格内是否存在giveBorder="yes"的input
  if ($targetTable.find('input[giveBorder="yes"]').length > 0) {
    // 给符合条件的表格设置红色边框
    $targetTable.css('border', '2px solid red');
  }
});

方式二：直接筛选目标表格（更简洁） #

不用遍历div，直接用:has()选择器找到所有包含目标元素的表格，一步到位：

// 找到所有包含input[giveBorder="yes"]的表格，直接设置红色边框
$('table:has(input[giveBorder="yes"])').css('border', '2px solid red');

额外小建议 #

HTML里的自定义属性推荐遵循data-*规范，比如把giveBorder="yes"改成data-give-border="yes"，这样更符合标准，后续使用时选择器就写成input[data-give-border="yes"]即可。

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