如何通过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只会返回与查询中所有条件匹配的元素。

Answer 2

查看jQuery的attribute selectors列表。 你正在寻找像

这样的东西

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

Answer 3

使用attribute equals selector

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

你可以找到更多信息here

Answer 4

jQuery按属性选择器选择：

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

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

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