作者ybite (小犬)
看板Ajax
標題Re: [問題] jQuery如何取id尾數當作顏色代碼?
時間Sun Oct 24 00:41:08 2010
※ 引述《ateclean (阿吃)》之銘言：
: 想請教板上的前輩們
: 最近在把玩wordpress
: 遇到一個小問題
: 如何用jQuery取得元素的id後幾碼，然後套用到css中呢？
: Html結構：
: <div id="post-159" class="post">
: <h3 class="story"></h3>
: <p>...</p>
: </div>
: 現在是希望把div的id套用到h3的border-left-color
: 至於顏色則是希望改成#A59
: 黃色的59是取ID後兩碼
: 請問這樣該如何用jQuery完成呢?
: 我想到的方法是
: $('div.post h3.story').css('border-left-color','#A'+?+?);
My solution, 也許不夠好：
$('div.post').each(function(index) {
var id = $(this).attr('id');
var colorValue = '#A' + id.substr(id.length - 2, 2);
$(this).find("h3.story").css('border-left-color',colorValue)
});
幾個想法：
* .each(function(index)) 對每個match到的東西作處理
* $(this)：each裡頭會把match到的元素的「DOM Tree」放在this
因此用$(this)轉成jQuery object
* string.substr: 決定從0為底開始第幾個開始切，一共切出幾個，
string.length: 拿出字串的長度
所以這樣就會切出最後兩個
* 最後 find 會找出這裡頭match的東西，return裡頭的jQuery object
所以就可以改他的CSS
另外給個建議，CSS Selector愈簡單通常效能愈高
div.post 改成.post也許會好一點
h3.story看狀況，如果你的post裡只會有一個h3，大可寫成h3:first
: 那兩個問號我試了一些笨方法後終於放棄了XDD
: 想不出來ORZ
: ---
: 以前都只是拿jq來玩玩dom淺淺的操作
: 但是這次忽然想玩點不一樣的
: 但是都想不出個好方法解決@@
: (javascript基礎沒學 /__\ )
: 希望可以得到解答 ^^ 謝謝
沒關係，JavaScript本來就比看起來難很多...
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 125.233.144.218
※ 編輯: ybite 來自: 125.233.144.218 (10/24 02:09)
1F：→ ybite:跑了一下JSFiddle發現寫錯，修正 10/24 02:10
3F：推 ateclean:感謝～ 可以解決問題了 太棒了 T_T 10/24 22:13
4F：→ ateclean:發現我一直亂用.lastIndexOf() 囧 xdd 10/24 22:13