2012-03-03 8 views
0

次の要素を選択しました。クラス名を取得する最善の方法は何ですかicon_23123?jQuery:マルチクラス要素からクラス名を取得

<div class="icon icon_23123"></div> 

要素の代わりに属性を選択するには[class^= "icon_"]のようなものがありますか? また、すべてのクラス名を取得してループスルーして、icon_で始まるクラス名を見つける必要がありますか?

EDIT:icon_で始まるクラス名を取得する関数を作成し、そのクラス名のみを書きたいとします。最終的には、アンダースコアの後ろの部分を取得したいが、必ずしも数値ではない。私の計画は正規表現を使用することだった(これらのクラス名は普通である)。

EDIT2:クラス名を取得しようとしている要素からクラス名が必要です(クラス= "icon _....."のドキュメント内のすべての要素ではありません)。

EIDT3:私の実際の問題は、データとスタイルを混在させることでした。私は古いブラウザをサポートする気にしないので、このデータのIDを保持するためにdata-idを使用しています。 .each組み合わせる

<div class="icon icon_23123" data-id="23123"></div> 

答えて

3

あなたがデータを格納するためのクラスを使用する場合は、HTML5要素にデータを添付するより便利な方法があります:data- attributes。たとえば、次のように読み取るために、データ入力

var id = myelement.getAttribute('data-id'); 

やjQueryのdata()ゲッターを使用します:

var id = $(myelement).data('id'); 

現代を

<div class="icon" data-id="23123"></div> 

は、その後、あなたは直接属性のいずれかを読み取ることができますブラウザはネイティブdatasetプロパティオブジェクト:

var id = myelement.dataset.id; 
+0

私はスタイリングにクラスを使用していますが、 – Thalecress

+0

アトリビュートセレクタ:.icon [data-id = "23123"] 'を使って個々のスタイルを要素に付け加えることができます。両方の目的で' data-'属性を使用します。 –

1

使用.ATTR()は():

$('[class^="icon_"]').each(function() { console.log($(this).attr('class'); }); 

これはicon_始まるクラス名を有し、各機能に渡すすべての要素を通過します。その後、.attrを使用して要素の属性にアクセスできます。あなたが唯一のn番目の要素にアクセスする必要がある場合、あなたは$('[class^=icon_]:eq(n)').attr('class')

編集を使用することができます(答えはコメントする):

var classes = $(selectedElement).attr('class'), 
    iconIndex = classes.indexOf('icon_'), 
    iconIndex2 = classes.indexOf(' ', iconIndex), 
    theClassName = classes.slice(iconIndex, (iconIndex2 > -1) ? iconIndex2 : undefined) 

APIドキュメント:eachattr

+0

しかし、選択された要素の2クラスがあります。私はicon_で始まるクラス名だけを必要とします。 – Thalecress

+0

遅れている(私の脳が痛い^^);)クラス名をループするよりも、indexOfとsliceを組み合わせて使うほうがいいです - これは仕事をするべきです:) – terabaud

関連する問題