自動編號

補充一下用法
Emmet ( Zen-coding 改版 )
範例這坨等於
(.barwrapper>.bar${$})*10
線上測試可以到 codepen

----------------------------------------------------------------------

今天要分享一個 如何快速製作自動編號 的DIV
EX:
<div class='barwrapper'><div class='bar' id='bar1 '>1 </div></div>
<div class='barwrapper'><div class='bar' id='bar2 '>2 </div></div>
<div class='barwrapper'><div class='bar' id='bar3 '>3 </div></div>
<div class='barwrapper'><div class='bar' id='bar4 '>4 </div></div>
<div class='barwrapper'><div class='bar' id='bar5 '>5 </div></div>
<div class='barwrapper'><div class='bar' id='bar6 '>6 </div></div>
<div class='barwrapper'><div class='bar' id='bar7 '>7 </div></div>
<div class='barwrapper'><div class='bar' id='bar8 '>8 </div></div>
<div class='barwrapper'><div class='bar' id='bar9 '>9 </div></div>
<div class='barwrapper'><div class='bar' id='bar10'>10</div></div>

/* 首先 先製作好一條 HTML div */
EX:

然後 放在 Excel 裡面，
再點其他格，然後往下拉，它就會自動幫你填完號碼啦~
但這個只有再單獨一個 號碼需要地增的時候 好用 HAHAHAHA

/* 第二個 自動編號的方法是用 notePad++ 的列模式 */

快速鍵是 alt+c
僅要選好起始值與遞增量
然後點選"編輯"按鈕
notePad++ 就會自動幫你新增編號
EX:
<pre><code></code></pre>

/* 第三個 jQuery index() eq() 來抓取指定的 div */
EX:
<div id="hole">
<div class="barwrapper"><div class="bar" id="bar"></div></div>
<div class="barwrapper"><div class="bar" id="bar"></div></div>
<div class="barwrapper"><div class="bar" id="bar"></div></div>
</div>

var divs = $('#hole &gt; div');
divs.click( function(){
//點擊的div編號 從0開始
var pos = $(this).index();

//被點選的div
var div = divs.eq( pos );
div.css('color', '#F00');
});

<div>
</div>

ps:
/* 此這個範例來說， click 下的 $(this) 會等同於 divs.eq(pos)  */
notePad++ keyboard shortcut

[ 補充 ]
今天經過一位 大大提供資訊
原來 有個很威猛的東西 叫作Zen-Coding
它可以讓你用css的語法來快速建立 html 標籤
真的是用過的人都說 讚!
快來用看看吧!

Chinese Introduction
Zen-Coding NotePad++ Version