使用值但未知属性的 JQuery 选择器答案

【问题标题】：JQuery selector using value, but unknown attribute使用值但未知属性的 JQuery 选择器
【发布时间】：2020-05-07 23:56:37
【问题描述】：

如何使用 JQuery 搜索具有特定属性值的元素，而不考虑属性标签？

喜欢：

$("[*='myvalue']")

应该找到

<a href="target.html" target="myvalue">...
<tr change="myvalue">...

第一个，因为是“target”属性，第二个是“change”属性。

有没有比只遍历所有属性更好的解决方案？

【问题讨论】：

我认为使用选择器是不可能的
stackoverflow.com/questions/8371229/…的可能重复

标签： javascript jquery

【解决方案1】：

您可以使用自定义伪选择器来过滤属性。

下面是jQuery方式。

$.expr[":"].attrFilter = function(elem, index, val){
    var len = $(elem.attributes).filter(function () {
        return this.value === val[3];
    }).length;
    if (len > 0) {
        return elem;
    }
};
$('body *:attrFilter("value")').hide();

Fiddle Demo

$.expr[":"].attrFilter 是自定义选择器的扩展机制。也可以传递参数。

语法：

$.expr[':'].selector = function(elem, index, match) { 

}

elem 是当前的 DOM 元素
index是elem的索引
match 是一个数组，其中包含有关自定义的所有信息选择器，其中传递的参数位于第三个索引处。 (Reference 1,Reference 2)
- match[0] - 包含完整的伪类选择器调用。在这个例子中：attrFilter("value")
- match[1] - 仅包含选择器名称。在这个例子中attrFilter
- match[2] – 表示参数表达式中使用了哪种类型的引号（如果有）。即单（'）或双（“）。在这个例如，它将为空。
- match[3] – 为我们提供参数，即括号中包含的内容。在本例中为 `value

【讨论】：

为什么要检查 val[3]（“val”数组的第 3/4 个元素）？
match 属性作为数组传递，其中传递的参数位于第 3 个索引/第 4 个元素处。抱歉，找不到它的完美文档。您可以调试match并检查。

【解决方案2】：

是的，这里也将采用相同的方法。Reference

 var elements = document.getElementsByTagName("*");
 for (var i = 0; i < elements.length; i++) {
 var element = elements[i];
 var attr = element.attributes;
 for (var j = 0; j < attr.length; j++) {
    if (attr[j].nodeValue == 'myvalue') {
        element.style.backgroundColor = 'red';
    }
  }
}

【讨论】：

【解决方案3】：

这是一个函数扩展，您可以使用它来查找所需的元素。

jQuery(function($) {
  $.fn.filter_by_attr_value = function(value) {
    return this.filter(function() {
        // [].some() would be better here
        return $.grep(this.attributes, function(attr) {
            return attr.nodeValue == value;
        }).length;
    });
  };

  $('*').filter_by_attr_value('myvalue').css('background', 'lightgreen');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="target.html" target="myvalue">FOO</a>
<table>
<tr change="myvalue">
  <td>BAR</td>
</tr>
</table>
<div>not me</div>

【讨论】：

【解决方案4】：

这可以在没有使用纯 JavaScript 或 VanillaJS 的 JQuery 的情况下完成，因为调用了其他名字对象。我放了 include 因为大多数时候我们搜索子字符串：

var all  = document.getElementsByTagName("*");
for (el of all) for (attr of el.attributes) if (attr.nodeValue.includes("myvalue")) console.log(attr.ownerElement)

【讨论】：