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

Question

我有一个名为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只会返回与查询中的所有条件匹配的元素.