JS获取带自定义属性元素、jQuery指定value元素获取问题求助

嘿，我来帮你搞定这两个前端问题！

你可以通过两种常见方式实现，分原生JavaScript和基于已有元素列表筛选两种场景：

• 直接通过属性选择器获取：用document.querySelectorAll()，这是最简洁的方式。如果自定义属性是data-user-id，想获取所有带这个属性的元素，写法是：

  // 获取所有带data-user-id属性的元素
  const targetElements = document.querySelectorAll('[data-user-id]');
  
  // 要是想匹配属性值为特定内容的元素，比如data-user-id="123"
  const specificElements = document.querySelectorAll('[data-user-id="123"]');
  

• 遍历已有元素列表筛选：如果已经拿到了一个元素集合（比如通过getElementsByTagName获取的所有input），可以转成数组后用filter()筛选：

  const allInputs = document.getElementsByTagName('input');
  // 筛选出带my-custom-attr属性的input
  const filteredInputs = Array.from(allInputs).filter(input => {
    return input.hasAttribute('my-custom-attr');
  });
  
  // 要是需要匹配特定属性值
  const matchedInputs = Array.from(allInputs).filter(input => {
    return input.getAttribute('my-custom-attr') === 'target-value';
  });
  

你之前用input.has('[value="'+v+'"]')的问题在于：jQuery的has()方法是用来查找包含指定子元素的父元素，根本不是用来过滤当前元素是否匹配属性选择器的，所以当然拿不到目标元素啦！

给你两种正确的实现方式：

方式1：直接用属性选择器定位元素 #

如果你的HTML结构类似这样：

<form>
  <input type="checkbox" value="apple" /> 苹果
  <input type="checkbox" value="banana" /> 香蕉
  <input type="checkbox" value="orange" /> 橙子
</form>

要勾选value为banana的复选框，代码应该这么写：

const v = "banana";
// 直接通过属性选择器找到目标input，然后设置勾选状态
$('input[value="' + v + '"]').prop('checked', true);

方式2：从已有的元素列表中筛选 #

如果已经提前获取了同类型元素的集合（比如所有复选框），可以用filter()方法筛选后再设置勾选：

const v = "banana";
// 先获取所有复选框
const $allCheckboxes = $('input[type="checkbox"]');
// 筛选出value匹配的元素并勾选
$allCheckboxes.filter('[value="' + v + '"]').prop('checked', true);

特殊情况：动态修改过value的元素 #

如果input的value是通过JS动态修改的（不是HTML里的初始值），属性选择器匹配的是HTML中的原始值，这时候要改用函数判断当前的value：

$allCheckboxes.filter(function() {
  return $(this).val() === v;
}).prop('checked', true);

这样就能正确找到并勾选目标元素了！

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