jQuery-將網頁元素名稱標示出來

不知有沒有人跟我有一樣的困擾? 步入中年後，腦容量似有變小趨勢，每次寫網頁Client Script時，<input>, <select>的欄位名稱老記不住，要用時總是要回HTML Source或用IE Dev Tools去查，查完了一轉頭又忘了，再不然就是切換回Script Editor時搞不清楚剛才寫到哪裡。幾番折騰下來，效率很差，心情很糟。(老了，不中用了~~ 不中用了~~ 不~中~用~了了了了~~~)

於是我寫了以下的jQuery Plugin，試圖把所有的輸入元素id直接顯示在網頁上，方便對照，也試圖挽救我岌岌可危的事業。

$.fn.showElemId = function(bgc, fc) {
    return this.each(function() {
        var $elem = $(this);
        //if (!$elem.is(":visible")) return;
        var pos = $elem.offset();
        var html = "" +
        (this.id || "----") +
        "";
        $("body").append(html);
    });
};
/* 使用範例: $(":text,select").showElemId(); */

用Hotmail的註冊畫面做個示範(只查:text,select，不包含:button,:password)，如下圖所示，輸入欄位元素名稱一目瞭然，列印出來，就不用每次去HTML Source裡找半天了，真是中年程式開發人員的福音呀

轉載自 http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/10/13/mark-element-id-with-jquery.aspx