0

我试图弄清楚如何从 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属性，但我认为这将是另一个问题，因为没有人愿意将其作为奖励。

4

1 回答 1

2

你可以这样试试：

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);

小提琴

但请注意，这些属性名称对 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();

小提琴

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

于 2013-10-09T19:08:20.350 回答