扫描 DOM 并返回或操作具有以特定字符串开头的特定属性的元素 [重复]

Question

我试图弄清楚如何从 DOM（从上到下）获取包含以给定字符串为前缀的特定属性的元素列表，例如，“猴子”就是那个字符串。如果有的话。

我使用$.each() 和:contains 提出了这个非常松散的想法，但在两者之间我看不出有什么好处。所以我想我会来这里挑选一些大脑。

我想要做的基本上是扫描我的 dom，当我调用一个给定的函数时，我最终会建立起来。这将寻找具有在这种情况下以“猴子”为前缀的属性的元素，想想data- 属性及其用途。减去提供特定选择器，而不是实际使用 data- 属性。

想象一下这个 HTML

<div monkey-user="bar" monkey-permission="read">
    <span monkey-user="bar" monkey-permission="read">some text</span>
</div>
<div>
    <input type="text" monkey-user="bar" monkey-permission="none">
</div>
<input type="text">
<input type="text">
<input type="text">
<input type="text">

然后是这个 javascript/jquery 概念，除非可以使用更清洁的东西。

var arr = new Array();
$("*").each(function()
    {
     if($(this).children().length == 0) 
         {
              if($(':contains("monkey-")',this))
              {
                 arr.push($(this));
              }   
         }
 });

在这种情况下，arr 的结果将是上面的 3 个元素，其中包含 monkey-，否则会跳过其他任何内容。还值得注意的是用户/权限是为了举例，从长远来看，这些可以是其他特定的东西，将根据需要使用（在这种情况下，这些将类似于使用 data 属性但我认为这将是另一个问题，因为没有人愿意将其作为奖励。

Answer 1

你可以试试这个方法：

var arr = $("body").find('*').filter(function(){
    var attrs = this.attributes; //get the attributes of the element
    return ($.grep(attrs, function(o){
        return /monkey/.test(o.name); //return the attributes that has name to be matched
    }).length); //return the elements that has at least one of the matched attributes
}).get();
console.log(arr);

Fiddle

但请注意，这些属性名称对 html 元素无效。考虑改用data-* 属性

如果您打算使用 data-* 那么您可以使用 data api（但这也会选择其他不是元素属性的数据属性集）

var arr = $("body").find('*').filter(function(){
    var attrs = Object.keys($(this).data());
    return ($.grep(attrs, function(o){
        return /monkey/.test(o) === true;
    }).length);
}).get();

Fiddle

但是这些方法确实会减慢速度并且效率低下，我建议您在所有具有猴子属性的属性中添加另一个属性，例如 data-hasmonkey。然后你可以让属性选择器更简单更好：$("[data-hasmonkey]");