Question

我试图找出如何从DOM（从上到下）获取一个元素列表，其中包含以给定字符串为前缀的特定属性。例如，“monkey”就是该字符串。如果存在的话。

我使用$.each()和:contains将这个想法非常松散地放在一起，但在两者之间我看不出任何好处。所以我想我会来这里挑几个脑。

当我打电话给一个给定的功能时，我想要做的基本上就是扫描我的dom。这将寻找具有前缀的属性的元素，在这种情况下，“monkey”会想到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-，否则将跳过其他任何内容。另外值得注意的是，用户/权限是为了举例，从长远来看，这些可以是其他特定的事情，将根据需要进行处理（在这种情况下，那些将类似于使用{{1}但是我认为这将是另一个问题，而不是有人想把它当作奖励。

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- *那么您可以使用数据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]");

扫描DOM并返回或操作具有特定字符串前缀的特定属性的元素

1 个答案: