2011-01-11 13 views
3

jQueryの.attr();関数を使用して、選択を容易にするためにいくつかのページ要素のカスタム属性を作成するようにしたいと思います。jQuery:ページ要素に役立つ情報を追加するにはどうすればよいですか?

jQueryとjavaScriptには多くの柔軟性があり、初心者としてはまだ完全な可能性を秘めていないことが分かっています。

潜在的なIDを作成したり、たくさんのクラスを追加する以外に、セレクタ$()で簡単に選択できるようにdivや他のページ要素に情報を追加する方法はありますか?

私は主に賛否両論に興味があり、異なるアプローチに基づいてどのようなメモリの問題やスピードの問題が生じるのでしょうか。

答えて

5

要素にカスタム属性を作成する際に問題はありません。とにかく、html5 data-の仕様に従ってください。

<div id="foo" data-info="hello" data-more="{'iam': 'anobject'}" /> 

これをされる使用についてのクールなこと、jQueryの(最新版)が自動的にdata-x属性を解析し、.data()はExpandoにそれらを追加します。

$('#foo').data('info') === 'hello' 
$('#foo').data('more').iam === 'anobject' 

は、あなたはまだあなたの要素に

$('div[data-info=hello]') 

のようなセレクタを実行することができます。

REF:.data()html5 data attributes

+0

データAPI(http://api.jquery.com/jQuery.data/)を使用するのでしょうか?私は解決策としてこれを落胆させているわけではありません。私は単に興味があります。 – Andy

+0

Nuberyを許してください。ただし、一致するdata-info属性を持つすべての要素を選択するにはどうすればよいですか? – sova

+0

@nalroff:おそらくHTML4の検証に失敗します。しかし真剣に、誰が本当にそのことを気にしているのですか? – jAndy

2

HTML5はdata-* attributesを紹介しています。したがって、カスタム属性を導入する場合は、少なくともこの仕様に固執します。

jQueryには、要素と任意のデータを関連付けるための.data()メソッドもあります。セレクタでデータを使用する必要がないかぎり、これが好ましい方法です。

1

jQueryのプラグインは、通常、「REL」または「タイトル」のようないくつかの既存の属性を使用するが、jQueryのもJavaScriptで特定オブジェクトに関する情報を格納.data()方法を有しています。ログのように動作します。この技術の

http://api.jquery.com/jQuery.data/

両方許容可能であるとうまく機能。

0

あなたは本当にあなたがこの上に使用することができますいくつかの便利なセレクタ初期選択のためだけのクラスとIDを使用しますが、ここであるべきである。注意すべき最初の事はことである

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

1

jQuery selectorsであり、非常に強力です。 IDやクラスで選択する必要は必ずしもありません。タグ、タイプ、別の選択肢(子供/親/兄弟/その他)との関係で選択できます。したがって、IDやクラスを選択するために、さまざまな要素にIDやクラスを追加する必要はありません。

これは、クラスとIDを避けるためだけにクラスとIDを使用しないでください。彼らは理由のために存在し、その理由は、それらがjQueryやCSSなどであれ、簡単で簡単に選択できるようにすることです。クラスとIDを削除した場合、HTMLを見栄えの良いものにすることができますが、jQueryコードが畳み込まれたり、非常に非効率的になることがあります。 (たとえば、親コンポーネントを選択してその子を見つけるよりも、直接IDを選択する方が速い)。

0

jQueryで要素を見つける最も簡単な方法は、一意のIDであるため、誘惑の目的がjQueryの要素を簡単に取得できるようにするには、意味がないようです。

私はこのようなテクニックを使用して、アクセシビリティ向上のためにtitleやaltなどの属性を追加しました。

+0

一意のIDを持つ要素を1つだけ取得しようとしていないことを意味していると思います。要素のさまざまなグループ化があり、この場合は独自の属性を作成すると助かります – sova

+0

Yupしかし、その場合でも、クラスは仕事を完璧にやると言います。しかし、amosrivera data()に言及されているように、jQueryオブジェクトをフィルターすることもできます.filter( "data = 'whatever'") – Nabab

1

attr()を使用することをお勧めしません。これは強力なツールであり、実際に要素に多くの情報を追加するのに役立ちます。内部のjavascriptフレームワークをサポートするためにいくつかのプロジェクトを使用しています。セレクタを使うのが簡単であるという利点があります!

+0

あなたの親切な言葉をありがとう=).attr()は間違いなくとても素晴らしいです、その柔軟性は標準的な属性に限定されていないことを嬉しく思います! – sova

0

.data('key', 'val')を使用してデータを設定し、.data('key')を使用してデータを読み取ります。

0

この原因XHTMLは、厳密に検証することはないだろう、私は間違いなく

関連する問題