HTMLで特定の文字列で始まる属性を検索する方法はありますか

Question

特定の文字列で始まる属性を持つすべての要素を見つける方法はありますか？

私はMooToolsはフレームワークを使用していますが、これは私が試したものです：

$$('*[data-media-*]'); 

をしかし、それだけで、ページ内のすべての要素を出力します。

ページ内で、属性がdata-media-で始まるすべての要素を取得する方法はありますか？

Answer 1

すでに一致したdata- *属性を持つ要素を返す必要がある要素をフィルタリングできます。アクションで

Elements.implement({ 
    filterData: function(substring){ 
     return this.filter(function(element){ 
      var attribs = element.attributes, 
       len, 
       ii = 0; 

      for (len = attribs.length; ii < len; ++ii) { 
       if (attribs[ii].name.indexOf('data-') === 0 && attribs[ii].name.indexOf(substring) !== -1) { 
        return true; 
       } 
      } 
     }); 

    } 
}); 

console.log($$("div").filterData('foo')); 
console.log($$("div").filterData('bar')); 
console.log($$("div").filterData('oba')); 

：http://jsfiddle.net/dimitar/pgZDw/

欠点は：あなたはすでに例えば、意味をなす要素のコレクションにそれを渡す必要があります。 div。FOOまたは#someid *

よりエレガントな解決策は、スリックに:data()擬似を追加することです：

(function(){ 
    // cache reusable string 
    var data = 'data', 
     hyphen = '-', 
     // set the fallback via XMLSerializer, if no outerHTML (eg. FF 2 - 10) 
     XS = this.XMLSerializer && new XMLSerializer(); 

    Slick.definePseudo(data, function(value){ 
     return (this.outerHTML || XS.serializeToString(this)).test([data, value].join(hyphen)); 
    }); 
}()); 


console.log($$("div:data(foo)")); 
console.log($$(":data(media-)")); 

更新例：http://jsfiddle.net/dimitar/pgZDw/3/

Answer 2

$$('div[attrName="attrnameValue"]').each(function() { 
    // `this` is the div 
}); 

あなたは、コンテナ内の各要素の属性を反復し、属性名は、あなたが探しているもののための正規表現と一致するかどうかを見ることによって、このような何かを近似することができる

Answer 3

：たとえば

、in this jsFiddle, I am looking for li elements with the data-media-tv and data-media-dvd propertiesを。

あなたは見たいものだけを返すように正規表現を調整できます。あなたの質問のようなデータメディア*を持つ要素だけを見たいですか？ Here you go。

---

が、これは正確にスケーラブルではないことに注意してください。ページ上のすべての要素を繰り返し処理しているため、すべての属性をチェックしています（ただし、見つかった場合は早期に返されます）。これは大きなページでは遅くなる可能性があります。

これは、検索するコンテナのみに制限するか、反復処理する要素のみに制限してください！ document.bodyに対してこれを実行すると、ページ内のすべての要素が繰り返されます。その結果、あなたの家が燃え尽きると私は責任を負いません。唯一の可能性$$を経由して、選択し、チェックしたい要素を渡し、elementsで

function attrMatch(elements, regexp) { 
    // Iterate through all passed-in elements, return matches 
    var matches = elements.filter(function(li) { 
    var numAttr = li.attributes.length; 
    for(x=0;x<numAttr;x++) { 
     var attr = li.attributes[x]; 
     return attr['name'].test(regexp); 
    } 
    }); 

    return matches; 
}; 

：:)

---

ここでは、機能化さです。コンテナ要素のすべての要素を確認する場合は、上記のelementの各インスタンスでelementsをcontainerとcontainer.getChildren()に置き換えます。

Answer 4

はちょうど（共通）インデックス/位置を知るthis jsfiddle を試してみてください属性data-media-*を削除し、それに応じてコード内で使用します。