グローディアのサービス一覧はこちら
 

jQueryでidやclass、placeholder等要素名を指定

概要

プラグイン等を使用していると、html側から編集できなかったりします。
そんなときにこれで外部から属性を指定できます。

簡単にECサイトやホームページを作れます!
みたいなサービスを使っていると、機能の実装に専用タグが用意されてて楽なんですけど、
まあ自由が利かないこと!
そんな時に使えます。何度かお世話になりました(^^)


説明

$("div.[divのクラス名] [タグ名]").attr('id','[付けたいid名]');<br>

divにclass、pにidを指定する場合。

これでhtmlでいうと以下のような状態になります。


最初と最後だけ指定する

pタグが複数並んでいますが、最初だけ、最後だけに指定したい場合は以下のように書きます。

$('p:first').attr('class', 'test_p'); $('p:last').attr('class', 'test_p');

要素番号を指定してクラスを追加する

最初や最後ではなく、2番目だけなんて時には以下のように書きます。
番号は0から始まるので、2番目の場合は”1″となります。

$('p').eq(1).attr('class', 'test_p');

奇数や偶数にだけ指定する

奇数には”odd”、偶数には”even”セレクタを使用します。

$('p:odd').attr('class', 'test_p'); $('p:even').attr('class', 'test_p');

連番で追加する

“test_p01″、”test_p02″、”test_p03″…
と、連番で追加したいときにはeachを使用します。


直下の要素にだけ追加する

以下のように子要素がある場合。


親要素のpタグにしか適用させたくないな…
というときに、#test_div直下のpタグと指定します。

$('#test_div>p').attr('class', 'test_p');
これで以下のように親要素#test_div直下のpタグにしか適用されません。


補足

$('p').attr('class', 'test_p'); ではなく、
$('p').addclass('test_p'); のようにも書けますが、個人的には前者の方が分かりやすいと思っているので、
そちらを使用しています。

※記事の内容は保証はしておりません(執筆時期や実施環境により挙動が変わるものがある為)。
別途検証してご利用いただくことをおすすめいたします。

グローディアのサービス一覧はこちら