LoginSignup
1

More than 5 years have passed since last update.

Emmetで連番がうまく出ない

Posted at

前書き

htmlでセレクトボックスってあるじゃないですか。あれで生年月日のフォーム作ろうと思ってですね?
emmetを使って以下のように書いたわけですよ。

option.birthday-year#birthday-year$@1900[value="$@1900"][label="$@1900"]*100

それで展開したのが、こちら

<option value="1900" class="birthday-year" id="birthday-year3799" label="5698"></option>
<option value="1901" class="birthday-year" id="birthday-year3800" label="5699"></option>
<option value="1902" class="birthday-year" id="birthday-year3801" label="5700"></option>
<option value="1903" class="birthday-year" id="birthday-year3802" label="5701"></option>
<option value="1904" class="birthday-year" id="birthday-year3803" label="5702"></option>
<option value="1905" class="birthday-year" id="birthday-year3804" label="5703"></option>
<option value="1906" class="birthday-year" id="birthday-year3805" label="5704"></option>
<option value="1907" class="birthday-year" id="birthday-year3806" label="5705"></option>
<option value="1908" class="birthday-year" id="birthday-year3807" label="5706"></option>
<option value="1909" class="birthday-year" id="birthday-year3808" label="5707"></option>

idとlabelが連番にならない...

本題

開発環境 atom1.8.0

まずは基本的なところから

option.birthday-year#birthday-year$[value="$"][label="$"]*10
<option value="1" class="birthday-year" id="birthday-year1" label="1"></option>
<option value="2" class="birthday-year" id="birthday-year2" label="2"></option>
<option value="3" class="birthday-year" id="birthday-year3" label="3"></option>
<option value="4" class="birthday-year" id="birthday-year4" label="4"></option>
<option value="5" class="birthday-year" id="birthday-year5" label="5"></option>
<option value="6" class="birthday-year" id="birthday-year6" label="6"></option>
<option value="7" class="birthday-year" id="birthday-year7" label="7"></option>
<option value="8" class="birthday-year" id="birthday-year8" label="8"></option>
<option value="9" class="birthday-year" id="birthday-year9" label="9"></option>
<option value="10" class="birthday-year" id="birthday-year10" label="10"></option>

これは問題なく連番に。

次:idを1900スタートにした。

option.birthday-year#birthday-year$@1900[value="$"][label="$"]*10
<option value="1" class="birthday-year" id="birthday-year1900" label="1900"></option>
<option value="2" class="birthday-year" id="birthday-year1901" label="1901"></option>
<option value="3" class="birthday-year" id="birthday-year1902" label="1902"></option>
<option value="4" class="birthday-year" id="birthday-year1903" label="1903"></option>
<option value="5" class="birthday-year" id="birthday-year1904" label="1904"></option>
<option value="6" class="birthday-year" id="birthday-year1905" label="1905"></option>
<option value="7" class="birthday-year" id="birthday-year1906" label="1906"></option>
<option value="8" class="birthday-year" id="birthday-year1907" label="1907"></option>
<option value="9" class="birthday-year" id="birthday-year1908" label="1908"></option>
<option value="10" class="birthday-year" id="birthday-year1909" label="1909"></option>

ん?labelが勝手に連番になった。

次:idとvalueを1900スタートにした。

option.birthday-year#birthday-year$@1900[value="$@1900"][label="$"]*10
<option value="1900" class="birthday-year" id="birthday-year3799" label="3799"></option>
<option value="1901" class="birthday-year" id="birthday-year3800" label="3800"></option>
<option value="1902" class="birthday-year" id="birthday-year3801" label="3801"></option>
<option value="1903" class="birthday-year" id="birthday-year3802" label="3802"></option>
<option value="1904" class="birthday-year" id="birthday-year3803" label="3803"></option>
<option value="1905" class="birthday-year" id="birthday-year3804" label="3804"></option>
<option value="1906" class="birthday-year" id="birthday-year3805" label="3805"></option>
<option value="1907" class="birthday-year" id="birthday-year3806" label="3806"></option>
<option value="1908" class="birthday-year" id="birthday-year3807" label="3807"></option>
<option value="1909" class="birthday-year" id="birthday-year3808" label="3808"></option>

idがおかしなことに

次:順番をいじってみた(idとclassを後ろに)

option[value="$@1900"][label="$"].birthday-year#birthday-year$*10
<option value="1900" label="1900" class="birthday-year" id="birthday-year1900"></option>
<option value="1901" label="1901" class="birthday-year" id="birthday-year1901"></option>
<option value="1902" label="1902" class="birthday-year" id="birthday-year1902"></option>
<option value="1903" label="1903" class="birthday-year" id="birthday-year1903"></option>
<option value="1904" label="1904" class="birthday-year" id="birthday-year1904"></option>
<option value="1905" label="1905" class="birthday-year" id="birthday-year1905"></option>
<option value="1906" label="1906" class="birthday-year" id="birthday-year1906"></option>
<option value="1907" label="1907" class="birthday-year" id="birthday-year1907"></option>
<option value="1908" label="1908" class="birthday-year" id="birthday-year1908"></option>
<option value="1909" label="1909" class="birthday-year" id="birthday-year1909"></option>

おお!なんかうまくいった!!

結論

要素の順番間違えるとうまくいかない?ぽい。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1