他の属性名のjQuery hasClass

Question

hasClassは、要素に何らかのクラスがあるかどうかをチェックしたいときに便利です。他の属性についても同じチェックをしたい。たとえば、

を使用し、このdivがユーザーに利用可能かどうかを確認したいとします。だから、私はそれを好むだろう

$('#nav').hasAttributeValue('data-available-for', 'users') 

これのための既存の美しい小さな解決策はありますか？

Answer 1

文字列を分解したり、indexOfを使用する必要はありません。 jQueryにはCSSセレクタの完全なセットが組み込まれているため、属性セレクタを使用できます。

あなたは.is()と属性セレクタを組み合わせることができます

if($('#nav').is('[data-available-for~="users"]')) { .. 

http://api.jquery.com/category/selectors/

http://api.jquery.com/attribute-contains-word-selector/

Answer 2

は、私はあなたがattrを探していると思う：それは非常に簡単だ

$('#nav').attr('data-available-for', 'users'); // data-available-for="users" 

Answer 3

：

if ($('#nav').attr('data-available-for').split(' ').indexOf('users') != -1) { 
    // do stuff 
} 

同様に、あなたは2番目の引数としての属性の新しい値を渡すことで属性を設定することができます。

$('#nav').attr('data-available-for').indexOf('users') != -1 

jqueryヘルパーを作成することができます。

if ($("#nav[data-available-for~=user]").length) { 
    // is available for 'user' 
} 

するか、ご希望の場合は、要素が条件と混合していない：

Answer 4

あなたはCSSセレクタを利用することができますが、その上に機能を構築することができます。もちろん、

if ($("#nav").filter("[data-available-for~=user]").length) { 
    // is available for 'user' 
} 

それはあなたのためにそれをより読みやすくします。

Answer 5

私は図書館に戻って落ちる前に、いくつかのネイティブJavaScriptを使用しようとするだろう。あなたはシリアル化されたDOMオブジェクトのデータセットの属性を使用することができ、それが実現しています

<div id='strawberry-plant' data-fruit='12'></div> 

<script> 
var plant = document.getElementById('strawberry-plant'); 

//'Getting' data-attributes using getAttribute 
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12' 

// 'Setting' data-attributes using setAttribute 
plant.setAttribute('data-fruit','7'); // Pesky birds 
</script> 

<div id='sunflower' data-leaves='47' data-plant-height='2.4m'></div> 

<script> 
// 'Getting' data-attributes using dataset 
var plant = document.getElementById('sunflower'); 
var leaves = plant.dataset.leaves; // leaves = 47; 

// 'Setting' data-attributes using dataset 
var tallness = plant.dataset.plantHeight; // 'plant-height' -> 'plantHeight' 
plant.dataset.plantHeight = '3.6m'; // Cracking fertiliser 
</script> 

加えて、あなたはこの

<script> 
// Select all elements with a 'data-flowering' attribute 
document.querySelectorAll('[data-flowering]'); 

// Select all elements with red leaves 
document.querySelectorAll('[data-foliage-colour="red"]'); 
</script> 

querySelectorAll（のようなquerySelectorAllといくつかの本当に強力な選択を使用することができます） caniuse.comによると、オンラインの人の90％近くがサポートしています http://caniuse.com/queryselector

これはほんの始まりです。ここでcss3クエリセレクタのフルパワーをチェックしてください： http://www.w3.org/TR/selectors/#selectors