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

我有一个名为data-role的自定义属性，我想在jQuery中找到data-role =“content”的所有元素。

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

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

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

我有一种感觉，在jQuery中有一个优雅的1行解决方案，但我是一个新手。 在我知道之前我无法入睡，所以也许你堆叠花可以帮助一个兄弟。 😉

Answer 1

 $("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只会返回与查询中的所有条件匹配的元素。

Answer 2

查看jQuery的属性选择器列表。 你正在寻找类似的东西

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

Answer 3

使用attribute equals selector

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

你可以在这里找到更多信息

Answer 4

jQuery按属性选择器选择：

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

对于数组使用.each(); 而不是

 $('[data-role="content"]').each(function(){ alert($(this).html()); });