jQueryでリストに数字を振る場合の基本的メモ

みなさん、こんにちは、まーしーです。
こちらで見るテレビ番組で好きなのはJamie Oliverの30分でつくる料理番組です。なんとも言えない雑！？な感じと味付けがほとんど同じなのがいいです。
作りながら"Beautiful", "Delicious" , "Lovely"とか自分で言っているのも好印象です。そういう姿勢は見習いたいです。

さて、今日は自分用メモですが、jQueryでリストに数字を振る話でも。

ol / liの順列リストで数字を表示させることが出来ますが、この数字だけをCSSで調整したいと思うと<li></li>の中を<span></span>でくくってどうこうするとかなにかしらの方法で対応することが出来ます。

どの方法を使うべきかは場合に応じて変えるとおもいますが、jQueryで対応することが出来る場合のメモです。

やるとしたらeach()で

再現したいことをやるにはこのようなかんじですね。
（サンプルはulにしてますが、普通はolです）

listに番号を振るサンプル - jsdo.it - share JavaScript, HTML5 and CSS

まぁ、とりあえずこんな感じで対応出来ます。
Thanks @5509さん。

親子セレクタで

似たようなことをやろうとするとセレクタでどうにかしようとする事も考えられます。

listに番号を振るサンプル2 - jsdo.it - share JavaScript, HTML5 and CSS

全ての<li>をカウントしてるので表示させたい方法にはなっていませんね。

んじゃ入れ子に対応しようとしてこんなかんじでやってみます。

listに番号を振るサンプル3 - jsdo.it - share JavaScript, HTML5 and CSS

入れ子になっているのは把握してくれていますが、入れ子部分がまた違いますね。
そもそもこの方法だと２階層以降の入れ子に対応出来ないのでNGなわけですね。  

ということで１つめの方法で

ということで１つめの方法に落ち着きます。

はじめに書いたみたいに<li></li>の中を<span></span>でくくるために<li></li>のテキストを取り出して云々、という方法もあるかもしれません。
似たようなことであれば数字を追加する方法を選択する、というスタートの仕方次第で色々変えられるということです。

最初これをやろうとおもったときにspanでなんとかくくれないかな、とおもいながらも入れ子部分をどうしたものか、とか考えてて１つめの方法になったわけですが。

どういう風にするかと考え始めるときに間違えるとなかなか答えにたどりつかない例ですね。