jQueryで複数の要素に id属性や class属性を与える
HTML内のたくさんの要素に連番で class属性や id属性を直接追加するのは骨の折れる作業ですが jQueryを使って簡単に追加する事ができます。
jQueryで複数の要素に id属性や class属性を与える方法
例として兄弟要素に順番に連番を用いた id属性を追加する方法を説明します。
HTML body
<div>要素1</div> <div>要素2</div> <div>要素3</div>
JavaScript
$(function(){
$('div').attr('id', function(i){
i++;//初期値0を1に
return 'id-' + i;//要素の数だけ1から連番で idを追加
});
});
この場合 attrメソッドを使って属性を指定して、functionで連番の id属性を追加する処理を行う。連番は1から始まるように i++を使い初期値を1にする。 returnで iに1づつ追加し出力します。
デモ jQueryで複数の要素に id属性や class属性を与える
jQueryで複数の要素に id属性を追加します。マウスオーバーした要素のid属性を取得して表示させます。
要素1
要素2
要素3
HTML body
<div class="wrap_demo"> <div>要素1</div> <div>要素2</div> <div>要素3</div> </div>
CSS
#postContents #demo-1 .wrap-demo {
letter-spacing: -.4em;
text-align: center;
}
#postContents #demo-1 .wrap-demo > div {
background: #f1f1f1;
border: 1px solid #ddd;
display: inline-block;
font-size: inherit;
letter-spacing: normal;
margin: 10px;
padding: 10px;
position: relative;
text-align: center;
}
#postContents #demo-1 .wrap-demo .baloon {
background: #333;
border-radius: 2px;
color: #fff;
display: none;
left: -10px;
padding: 10px;
position: absolute;
top: -60px;
width: 200px;
z-index: 1;
}
#postContents #demo-1 .wrap-demo .baloon:before {
border: 10px solid transparent;
border-top: 10px solid #333;
bottom: -20px;
content: "";
left: 30px;
position: absolute;
}
JavaScript
$(function(){
$('#post_ .cbox.demo .wrap_demo > div').attr('id', function(i){
return 'id-' + ++i;
});
$('#post_ .cbox.demo .wrap_demo > div').each(function(){
var _this_id = $(this).attr('id');
$(this).append('<div class="baloon">この要素の idは ' + _this_id + '</div>');
$(this).hover(function(){
$(this).find('.baloon').show();
}, function(){
$(this).find('.baloon').hide();
});
});
});
