这里是生活记录站丨技术站>>



WordPress)借jQuery之力找出坐沙发的是谁

Posted by MOPVHS on 2010/08/16 Leave a comment Go to comments




实际效果是这样的：

没特意为这个效果写过CSS，将就着看…

用jQuery判断谁是沙发…这念头是怎么来的捏？

大家看图就晓得了,是@流年和@snowxh的功劳:

乱入：

@snowxh:你可以只改这个页面不改全部。。
[叉腰] 跟姐学学嘛

大家有没发现她说话一直都是好生动的说…这次还有可爱的[叉腰]动作搭配~~~

嗯，言归正传，我们的目的是找到沙发，然后在页面某处显示。

我打开某篇文章页面的源码一阵猛看，发现每个评论都是被以下这样的标签包裹的：

<div id="comment-1019">

</div>

那就好办了，由于评论ID逐个递增，所以ID最小的那个就是沙发。

在此我们先在“functions.php”中给这个div加上一个名为“comment-body”的class：

<div id="comment-1019"  class="comment-body">

</div>
然后是js代码，有注释，不解释：
$(document).ready(function() {

var myArray = new Array(); //定义一个名为myArray的数组

  $('.comment-body').each(function(i){//找出每个class名为"comment-body"的div的id值

	  var str_len = $(this).attr('id').length; //取得获取的id名的长度

	  objString = $(this).attr('id').substring(8,str_len);  //id的格式是“comment-1019”，我们截取数字部分

	  myArray[i]=objString;//把所有id的数字部分放入myArray数组

  });
   myArray.sort(function compare(a,b){return a-b;});//将数组从小到大排序

 var sofa = "#comment-"+myArray[0];//取数组中的第一个，也就是沙发的ID

$(sofa+" .comment-body:first").clone().appendTo("#shafa"); //克隆沙发，添加到id为“shafa”的div中

//加“:fist”是为了排除沙发的子评论

 });

最后…预发布在： Aug 16, 2010 @ 00:00 不知这篇文章的沙发是谁呢~~~







jQuery ,

82 Comments.

  1. 欲风

    Firefox 3.6.10 Firefox 3.6.10 Windows 7 Windows 7

    2010/10/01 11:42 上午 on 1

    那个加一好刺眼。 :evil:

    回复
  2. Fanr

    Google Chrome 7.0.503.0 Google Chrome 7.0.503.0 Windows 7 Windows 7

    2010/09/02 1:45 上午 on 1

    哈哈，好强那，蛮实用的~~ :grin:

    回复
  3. Mucid

    Firefox 4.0b3 Firefox 4.0b3 Windows 7 Windows 7

    2010/08/17 8:18 下午 on 1

    那个大大滴图标在那里啊。。

    回复
  4. yetone

    Opera 10.61 Opera 10.61 Windows XP Windows XP

    2010/08/17 1:12 下午 on 1

    opera图标那么诡异啊啊啊啊啊 :evil:

    回复
  5. 小闇

    Google Chrome 5.0.375.125 Google Chrome 5.0.375.125 Windows Vista Windows Vista

    2010/08/17 12:36 下午 on 1

    首頁那個chrome飄來了十多次，我表示眼花了@_@?

    回复
  6. Dianso

    Google Chrome 6.0.453.0 Google Chrome 6.0.453.0 Windows XP Windows XP

    2010/08/17 2:01 上午 on 1

    browser/4.png

    这个图片突然弹出来，这个是怎样弄的啊

    回复
  7. QiQiBoY

    Firefox 3.6.8 Firefox 3.6.8 Windows 7 Windows 7

    2010/08/17 1:27 上午 on 1

    后台直接把沙发的人揪出来不是更快吗。。。 :roll:

    回复
  8. Mini Dragon

    Firefox 4.0b4.minidragon20100816 Firefox 4.0b4.minidragon20100816 Fedora Fedora

    2010/08/17 12:35 上午 on 1

    其实我是来炫耀浏览器的

    回复
  9. joyla

    Google Chrome 5.0.375.126 Google Chrome 5.0.375.126 Windows XP Windows XP

    2010/08/16 11:55 下午 on 1

    效果很不错！

    回复
  10. 玎蕾

    Firefox 3.6.8 Firefox 3.6.8 Windows Vista Windows Vista

    2010/08/16 8:21 下午 on 1

    很炫啊 :razz:

    回复
  11. thinknew

    Internet Explorer 8.0 Internet Explorer 8.0 Windows 7 Windows 7

    2010/08/16 7:27 下午 on 1

    加血的，啊，太华丽了，话说我这些天打工乱掉血，上网啊没得上，来你这里加血也不容易啊~ :cry:

    回复
  12. 冰剑

    Firefox 3.6.4 Firefox 3.6.4 Windows 7 Windows 7

    2010/08/16 7:11 下午 on 1

    这个不好玩，但是看到你那个漂浮的+1，我有点小灵感了。
    吃完饭开始折腾，哇哈哈。。

    回复
  13. yetone

    Google Chrome 6.0.493.0 Google Chrome 6.0.493.0 Windows XP Windows XP

    2010/08/16 3:53 下午 on 1

    IE下竟然不是圆角的，而且也不现实IE图标

    回复
  14. winy

    Google Chrome 6.0.466.0 Google Chrome 6.0.466.0 Windows 7 Windows 7

    2010/08/16 2:31 下午 on 1

    sf还有撒花效果。。。这个我去加上 :grin:

    回复
  15. winy

    Google Chrome 6.0.466.0 Google Chrome 6.0.466.0 Windows 7 Windows 7

    2010/08/16 2:26 下午 on 1

    嗯，你是倒过来的，我直接在循环里输出了，代价就是增加了查询数目。

    回复
  16. N

    Google Chrome 5.0.375.126 Google Chrome 5.0.375.126 Windows XP Windows XP

    2010/08/16 1:01 下午 on 1

    小效果是越来越多了，博主装修的很愉快啊

    回复
  17. mice

    GreenBrowser GreenBrowser Windows XP Windows XP

    2010/08/16 9:33 上午 on 1

    弄了半天是倒序显示- -…..
    话说 http://www.tulongzhiji.com/mopvhs/archives/images/mario2.png这是个什么玩意...
    一直在右边从下面飘上去…象幽灵…不过是个红X..

    回复
  18. yetone

    Google Chrome 6.0.493.0 Google Chrome 6.0.493.0 Windows XP Windows XP

    2010/08/16 3:49 上午 on 1

    chrome老讨厌了，老是让我来炫耀一下版本号 :grin:

    回复
  19. yetone

    Google Chrome 6.0.490.0 Google Chrome 6.0.490.0 Windows XP Windows XP

    2010/08/16 2:49 上午 on 1

    我想要首页大大的chrome图标 :evil:

    回复
  20. yetone

    Google Chrome 6.0.490.0 Google Chrome 6.0.490.0 Windows XP Windows XP

    2010/08/16 2:33 上午 on 1

    搞个日志发布后第一时间通知我的东东 :grin:

    回复
  21. 阿修

    Firefox 3.6.6 Firefox 3.6.6 Windows 7 Windows 7

    2010/08/16 12:53 上午 on 1

    话说我圈了一下才看到，你的博客有description啊

    回复
  22. 阿修

    Firefox 3.6.6 Firefox 3.6.6 Windows 7 Windows 7

    2010/08/16 12:52 上午 on 1

    第二个吧

    回复
  23. snowxh

    Firefox 3.6.8 Firefox 3.6.8 Windows Vista Windows Vista

    2010/08/16 12:24 上午 on 1

    乱入什么的最讨厌 (*/ω＼*)[脸红掩面]

    回复
  24. snowxh

    Firefox 3.6.8 Firefox 3.6.8 Windows Vista Windows Vista

    2010/08/16 12:22 上午 on 1

    沙花

    回复

Leave a Reply


[ Ctrl + Enter ] 订阅评论Feed