グローディア 株式会社 
概要
プラグイン等を使用していると、html側から編集できなかったりします。
そんなときにこれで外部から属性を指定できます。
簡単にECサイトやホームページを作れます！
みたいなサービスを使っていると、機能の実装に専用タグが用意されてて楽なんですけど、
まあ自由が利かないこと！
そんな時に使えます。何度かお世話になりました(^^)
|
1 2 |
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> |
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(function(){ $("div.text label").attr('id','loginname'); }); </script> |
説明
$("div.[divのクラス名] [タグ名]").attr('id','[付けたいid名]');<br>
例
|
1 2 3 4 5 6 7 8 9 |
<br /><br /><div> <p>test1</p> <p>test2</p> <p>test3</p> <p>test4</p> </div> |
divにclass、pにidを指定する場合。
|
1 2 3 4 5 |
$(function(){ $('div').attr('class', 'test_div'); $('p').attr('class', 'test_p'); } |
これでhtmlでいうと以下のような状態になります。
|
1 2 3 4 5 6 7 8 9 |
<br /><br /><div class="test_div"> <p id="test_p">test1</p> <p id="test_p">test2</p> <p id="test_p">test3</p> <p id="test_p">test4</p> </div> |
最初と最後だけ指定する
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を使用します。
|
1 2 3 4 5 6 |
var i = 1; $('p').each(function(){ $(this).addClass('test_p'+i); i++; }); |
直下の要素にだけ追加する
以下のように子要素がある場合。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<br /><br /><div id="test_div"> <p>test1</p> <p>test2</p> <div> <p>test2-1</p> <p>test2-2</p> </div> <p>test3</p> <p>test4</p> </div> |
親要素のpタグにしか適用させたくないな…
というときに、#test_div直下のpタグと指定します。
$('#test_div>p').attr('class', 'test_p');
これで以下のように親要素#test_div直下のpタグにしか適用されません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<br /><br /><div id="test_div"> <p class="test_p">test1</p> <p class="test_p">test2</p> <div> <p>test2-1</p> <p>test2-2</p> </div> <p class="test_p">test3</p> <p class="test_p">test4</p> </div> |
補足
$('p').attr('class', 'test_p');
ではなく、
$('p').addclass('test_p');
のようにも書けますが、個人的には前者の方が分かりやすいと思っているので、
そちらを使用しています。