作者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