遍历含is-required属性元素时，如何获取含validate-string属性元素的name？

嘿，我来帮你搞定这个问题！你已经能正常遍历带is-required属性的元素了，那要同时捕获带validate-string属性的元素的name属性，核心就是把两个属性选择器结合起来用就行啦。

核心思路 #

使用复合属性选择器，同时匹配拥有is-required和validate-string两个属性的元素，这样就能精准定位到你需要处理的目标元素，再逐个获取它们的name属性。

完整代码示例 #

$(document).ready(function() {
  // 匹配div下所有同时拥有is-required和validate-string属性的后代元素
  $('div [is-required][validate-string]').each(function() {
    // 获取当前元素的name属性
    const elementName = $(this).attr('name');
    
    // 先判断name属性是否存在，避免无意义的处理
    if (elementName) {
      console.log('需要验证的元素name:', elementName);
      // 这里可以调用你的自定义验证函数，比如传入name和元素值
      // customValidateFunction(elementName, $(this).val());
    }
  });
});

关键细节说明 #

• 选择器div [is-required][validate-string]：空格表示匹配div的所有后代元素；[is-required][validate-string]确保元素同时拥有这两个属性。如果你的目标元素是div的直接子元素，可以把空格换成>，写成div > [is-required][validate-string]，缩小匹配范围提升效率。
• 加入if (elementName)判断：避免某些元素没有name属性时出现undefined的情况，让代码更健壮。
• 拼写检查：确认元素的属性名是validate-string，有没有拼写错误（比如少了连字符、字母大小写不对），这是很容易踩的坑！

额外排查点 #

如果还是没拿到name属性，可以试试：

• 在.each()里先打印当前元素，确认选择器确实选中了目标元素：console.log($(this))
• 检查元素的name属性是否真的存在，有时候可能是动态生成的元素，需要确保代码在元素渲染完成后执行（如果是动态元素，可能需要用事件委托或者在元素生成后再调用遍历逻辑）

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