jquery - 如何通过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 中有一个优雅的单行解决方案，但我是新手。在我知道之前我无法入睡，所以也许你 stackoverflowers 可以帮助兄弟。;-)

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();而不是for

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