jQuery 筆記 – 找出每個特定字串開頭的div進行處理

情境 :
我想列出一連串 servers 開關機狀態. 還有電流大小. 當然我可以直接顯示在網頁上. 但是顯示那樣的網頁可能會花 15~20秒才有辦法把每一台 servers 的狀態讀回來. 在等待的過程.網頁是白色的畫面. 這樣看起來好像網頁當掉了. 所以想說先把html table layout 顯示出來. 在透過 jquery 顯示後面比較花時間的資料. 所以必須要針對不同的 servers 進行狀態查詢. 這樣的顯示方式看起來比較不像是當掉. XD

解法 :
假設我有下列 html 然後想針對每個 foo_ 開頭的 div 進行處理.

1
2
3
4
5

<div id="foo_1"></div>
<div id="foo_2"></div>
<div id="foo_3"></div>
<div id="foo_4"></div>
<div id="foo_5"></div>

當然可以先用 php 把個別的變數輸出到 javascrpit 內的某個變數. 然後再個別去處理. 但是這樣太肉腳了.所以用下列 jquery 方式處理.

1
2
3

    $("div[id^='foo_']").each(function() {
      $(this).text("我的div名稱是 " + $(this).attr('id') + ".");
    });

這樣就會列出下列結果

我的div名稱是 foo_1.
我的div名稱是 foo_2.
我的div名稱是 foo_3.
我的div名稱是 foo_4.
我的div名稱是 foo_5.

這樣你應該有感覺了吧? 再來就可以在 function 內處理..看是要針對 1 2 3 4 5 不同的名稱給予不同的處理. 例如用 .post 去取得不同的值顯示. servers 的狀態.