一起CSS

当前位置:一起CSS > 前端技术 > 文章正文

jQuery过滤选择器:not在IE中的bug

日期:2010-08-11 分类:前端技术

在《jQuery插件Flip》的第二个例子中 (查看 Demo),写过滤选择器的时候,发现在 IE 下有问题,无法过滤。代码是这样的:

$('.flipbox:not(:first)').hide();

代码在非 IE 浏览器下没有问题,即除了第一个含有 flipbox 类的元素外,其他的隐藏,但在 IE 里却全部隐藏了。

经过测试,除了上面的写法在 IE 下有问题外,下面的几种写法在 IE 下也有问题:

$('.flipbox:not(:first)');
$('.flipbox:not(:last)');
$('.flipbox:not(:even)');
$('.flipbox:not(:odd)');
$('.flipbox:not(:eq(1))');
$('.flipbox:not(:gt(1))');
$('.flipbox:not(:lt(1))');

很奇怪的是:如果把 className 换成 tagName,如上面把 .flipbox 换成对应的标签名,又不会出现问题。当然,换成标签名的话,你要确定不会选择到其他不需要选择的标签,以免产生混乱,出现其他问题。

对于这个问题,我的办法有两个:

  1. 与样式结合,改变写法
  2. 用 .ont 代替 :not

对于第一种方法,我们可以在样式里定义:

.flipbox { display:none}

而 jQuery 代码则写成:

$('.flipbox:first').show();

但是这种方法的可访问性低,如果访客禁止了 javascript,那他看不到主要内容。

对于第二种方法,jQuery 代码可写成:

$('.flipbox').not($(.flipbox:first).show();

这种方法的可访问性较好,即使访客禁止了 javascript,但他能看到所有内容。所以最后我选择了这种方法。

这里做了一个综合的例子,你可以在 IE 和非 IE 浏览器下看看他们的不同,查看 Demo

其实还有一个奇怪的现象,就是某种情况下给类选择器前面加上标签名,也不会出现问题,而这种情况就是这些类不能被相同的标签包裹。查看 Demo

很巧,在浏览愚人码头的博客的时候发现他早就发现了这个问题,并且也提出了解决方法,有兴趣的可以点击这里查看。

查看:807 评论:2 标签:,

相关日志

共有 2 条评论

  • wyysf 说:

    恩,我测试了一下发现not(:last)在ie下可以。not(:first)在ie6下确实不行!
    这个都不算什么not(:odd)在ie下显示的和火狐下显示的数值时反的,一个是1357另一个是2468!真是不测不知道啊!其实not(:odd)是不会被这样使用的,因为not(:odd)还不如直接使用:even。

  • 玎蕾 说:


    jQuery 酱油路过

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved