liに連番のidを振る方法
このブログのサイドメニューにある「最近のエントリー」の項目みたいなことをしたい場合の方法です。
要するに、
<ol>
<li id="no1">いちばんめ</li>
<li id="no2">にばんめ</li>
<li id="no3">さんばんめ</li>
</ol>
といった感じにする方法をまとめてみました。
JavaScriptで実現
まずはfor文で
$(function() {
var h=document.getElementById("hoge");
var l=h.getElementsByTagName("li");
for (var i=0;i<l.length;i++){
l[i].setAttribute("id","hoga"+(i+1));
}
});
<ol id="hoge">
<li>ほげ1</li>
<li>ほげ2</li>
<li>ほげ3</li>
</ol>
分かりやすいようにcssを以下のように指定。
#hoga1 {
color:#ff0000; //red
}
#hoga2 {
color:#666666; //gray
}
#hoga3 {
color:#ff6600; //orange
}
for文でわざわざやる必要はないとは思うのですが、一応できるっていうことで載せてみただけです。
eachでさくっと実現
each便利だよーと会社の人に教えてもらいました。
上のfor文と比べるとかなり楽に実現できます。
$(function() {
var i=1;
$("#hoge li").each(function(){
$(this).attr("id","hoga"+i);
i++;
});
});
ちなみに、thisとなっているところを"#hoge li"にすると、実行結果がすべてのliにid="hoge3"がつきます。
$(function() {
var i=1;
$("#hoge li").each(function(){
$("#hoge li").attr("id","hoga"+i);
i++;
});
});
ということで、thisにしないとちゃんと動作しません。
MTで実現
このブログの「最近のエントリー」部分のソースはこんな感じ。
<ol>
<MTArchiveList archive_type="Individual" lastn="5">
<li id="no<$MTVar name="__counter__"$>">
<a href="<$MTEntryPermalink$>"><$MTArchiveTitle$></a>
</li>
</MTArchiveList>
</ol>
__counter__で繰り返した回数の数字を出力してくれるので、
<li id="no1">ほにゃらら</li>
<li id="no2">ほにゃらら</li>
<li id="no3">ほにゃらら</li>
という感じで連番がふられます。
番外編:nth-childで実現
CSS3で定義されたnth-child疑似クラスでも同じ結果が実現できます(一部未対応のブラウザあり)。
ol li:nth-child(1) {
color:#ff0000; //red
}
ol li:nth-child(2) {
color:#666666; //gray
}
ol li:nth-child(3) {
color:#ff6600; //orange
}
指定された番号にだけ特定のスタイルを適用させることができるます。
調べ物してたら偶然たどりついたw
eachはコールバックの引数にインデックスを取れるからこう書いたほうがシンプルかもね。
$(function() {
$('#hoge li').each(function(i) {
$(this).attr('id', 'hoge' + (i + 1).toString());
});
});
まあどっちでもいいんだけど。
ほかちゃんさすがー…。
後でためさせていただく!ありがと!