部分属性に基づいてHTMLを検索

Question

部分属性に基づいて要素を見つけるためのjavascript（特にjQuery）との方法はありますか？

私はこれらのリンクで参照されるように部分的な属性値を見つけるのセレクタのいずれかを捜しているわけではない：

• starts with [名前^ =「値」]
• contains prefix [名前| =「値」 ]
• contains [名前* = "値"]
• contains word [名〜= "値"]
• ends with [名$ = "値"]
• equals [名= "値"]
• not equal [名前！= "値"]
• starts with [名前^ = "値"]

が、より

の線に沿って何かFへ

<div data-api-src="some value"></div> 
<div data-api-myattr="foobar"></div> 

と

$("[^data-api]").doSomething() 

indは、 "data-api"で始まる属性を持つ要素です。

$.fn.filterData = function(set) { 
    var elems=$([]); 
    this.each(function(i,e) { 
     $.each($(e).data(), function(j,f) { 
      if (j.substring(0, set.length) == set) { 
       elems = elems.add($(e)); 
      } 
     }); 
    }); 
    return elems; 
} 

は次のように使用されるように：

$('div').filterData('api').css('color', 'red'); 

そして持つ任意の要素にマッチします、それはあなたが探しているが、ちょうどこれを書いて数分を費やしている何であるか

Answer 1

わかりませんdata-api-*のようなデータ属性があり、それを拡張してより多くのオプションなどを含めるように変更することができますが、今はデータ属性のみを検索し、「開始」に一致しますが、少なくとも使いやすいですか？

FIDDLE

Answer 2

これはdata-api-*属性を持つものに候補者を制限する.filter()を使用しています。おそらく最も効率的なアプローチではありませんが、関連するセレクターで検索を絞り込むことができれば便利です。

$("div").filter(function() { 
    var attrs = this.attributes; 
    for (var i = 0; i < attrs.length; i++) { 
     if (attrs[i].nodeName.indexOf('data-api-') === 0) return true;  
    }; 
    return false; 
}).css('color', 'red'); 

デモ：http://jsfiddle.net/r3yPZ/2/

---

これはまた、セレクタのように書くことができます。ここに私の初心者の試みです：

$.expr[':'].hasAttrWithPrefix = function(obj, idx, meta, stack) { 
    for (var i = 0; i < obj.attributes.length; i++) { 
     if (obj.attributes[i].nodeName.indexOf(meta[3]) === 0) return true; 
    }; 
    return false; 
}; 

使用法：

$('div:hasAttrWithPrefix(data-api-)').css('color', 'red'); 

デモ：http://jsfiddle.net/SuSpe/3/

このセレクタは、jQueryのの前の1.8バージョンのために働く必要があります。 1の場合。8以上のsome changes may be required。

$.expr[':'].hasAttrWithPrefix = $.expr.createPseudo(function(prefix) { 
    return function(obj) { 
     for (var i = 0; i < obj.attributes.length; i++) { 
      if (obj.attributes[i].nodeName.indexOf(prefix) === 0) return true; 
     }; 
     return false; 
    }; 
}); 

デモ：ここでは1.8に準拠したバージョンの試みだhttp://jsfiddle.net/SuSpe/2/

---

より一般的な解決のためには、ここでの正規表現パターンを取り、そのパターンに一致する属性を持つ要素を選択するセレクタです：

$.expr[':'].hasAttr = $.expr.createPseudo(function(regex) { 
    var re = new RegExp(regex); 
    return function(obj) { 
     var attrs = obj.attributes 
     for (var i = 0; i < attrs.length; i++) { 
      if (re.test(attrs[i].nodeName)) return true; 
     }; 
     return false; 
    }; 
}); 

あなたの例では、このようなものは動作するはずです：

$('div:hasAttr(^data-api-.+$)').css('color', 'red'); 

デモ：http://jsfiddle.net/Jg5qH/1/