0

特定の文字列で始まる特定の属性を含む要素のリストを DOM から (上から下に) 取得する方法を理解しようとしています。たとえば、「猿」はその文字列です。存在する場合。

$.each()私はandを使ってこれを非常に大まかにまとめたアイデアを持っていまし:containsたが、2つの間にはそれから良い結果が得られません。だから私はここに来て、いくつかの頭脳を選ぶと思った.

私がやりたいことは、基本的に、特定の関数を呼び出すときに 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-* を使用する場合は、データ 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。monkey- 属性を持つすべての属性に別の属性を追加することをお勧めします。次に、属性セレクターをよりシンプルで優れたものにすることができます。$("[data-hasmonkey]");

于 2013-10-09T19:08:20.350 に答える