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

Question

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

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

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

ただし、ページ内のすべての要素を出力するだけです。

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

Answer 1

コンテナ内の各要素の属性を反復処理し、属性名が探しているものの正規表現と一致するかどうかを確認することで、次のようなものに近似できます。

たとえば、この jsFiddle では、およびプロパティを持つ要素を探していlidata-media-tvdata-media-dvdます。

正規表現を調整して、見たいものだけを返すことができます。(あなたの質問のように) data-media-* を持つ要素だけを見たいですか? どうぞ。

---

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

これを、検索したいコンテナのみ、または反復したい要素のみに制限してください! これを に対して実行するとdocument.body、ページ内のすべての要素が繰り返されます。結果としてあなたの家が全焼しても、私は責任を負いません。:)

---

ここでは関数化されています：

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

ではelements、チェックしたい要素のみを渡します。場合によっては で選択し$$ます。コンテナー要素内のすべての要素をチェックする場合は、上記の の各インスタンスでelementsとcontainerを置き換えます。container.getChildren()element

Answer 2

このjsfiddleを試し て、属性の（共通の）インデックス/位置を知り、data-media-*それに応じてコードで使用してください。

Answer 3

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()Slickに疑似を追加することです。

(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 4

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