如何在 jQuery 中通过自定义属性的特定值获取元素？

我有一个名为的自定义属性数据角色我想找到所有元素数据角色=“内容”在 jQuery 中。

我目前正在使用一些旧的 JavaScript 代码来执行此操作：

var elements = element.getElementsByTagName(tagName);
for(var i=0; i<elements.length; i++) {
  if(elements[i].getAttribute("data-role") == "content") {
    // does something evil
  }
}

免责声明：代码没有检查，只是快速写下来。

$("tagName[attribute='value']")

或者，就你的情况而言：

$("div[data-role='content']")

将返回正确的元素。

从那里开始，如果您想迭代与此选择器匹配的元素集，并且do something evil， 你可以：

$("[data-role='content']").each(function(index){

     Do something evil
     $(this) is the current element in the iteration
});

请注意，tagName 是可选的。 JQuery选择器可以随意连接，因此您可以同时查询标记名（简单字符串）、id（前缀为#），类（开头为.）或属性（如上所述在方括号中），或它们的任何有限组合，例如：

 $("tagName#someId.someClass.someOtherClass[attribute='value']")
 $("[attribute='value']")
 $('tagName')
 $('#someId')

都是有效的查询，但是请记住，jquery 将仅返回与查询中的所有条件匹配的元素。