使用jquery而不是CSS的第N个孩子

我在我的css代码中使用nth-child，但它在IE 8中不起作用。我知道IE 8无法处理nth-child，但我需要找到一种方法来使其工作。使用jquery而不是CSS的第N个孩子

这里是我的代码：

.paypalshop .shop-groups li:nth-child(1){ 
    float:left; 
    border: 1px solid #ccc; 
    width:200px; 

    } 

.paypalshop .shop-groups li:nth-child(2){ 
    float:left; 
    border: 1px solid #ccc; 
    width:150px; 
    } 

.paypalshop .shop-groups li:nth-child(3){ 
    float:left; 
    border: 1px solid #ccc; 
    width:210px; 
    } 

.paypalshop .shop-groups li:nth-child(4){ 
    float:left; 
    border: 1px solid #ccc; 
    width:200px; 
    } 

.paypalshop .shop-groups li:nth-child(5){ 
    float:left; 
    border: 1px solid #ccc; 
    width:70px; 
    } 

.paypalshop .shop-groups li:nth-child(6){ 
    float:left; 
    border: 1px solid #ccc; 
    width:105px; 
    } 

.paypalshop .shop-groups li:nth-child(7){ 
    float:left; 
    border: 1px solid #ccc; 
    width:154px; 
    } 

.paypalshop .shop-groups li:nth-child(8){ 
    float:left; 
    border: 1px solid #ccc; 
    width:130px; 
    } 

.paypalshop .shop-groups li:nth-child(9){ 
    float:left; 
    border: 1px solid #ccc; 
    width:220px; 
    } 
.paypalshop .shop-groups li:nth-child(10){ 
    float:left; 
    border: 1px solid #ccc; 
    width:220px; 
    }

所以我需要的是找到一种方法，使在IE 8的nth-child功能的工作是否有任何jQuery的方法，我可以使用，使其在IE 8的工作？

谢谢！

来源

2012-08-01 larin555

是使用：第n个孩子选择

http://api.jquery.com/nth-child-selector/

用CSS改变

http://api.jquery.com/css/

例如

$("paypalshop .shop-groups li:nth-child(2)").css("width":"150px","float":"left","border":"1px solid #ccc");

来源

2012-08-01 18:59:00

这会绕过IE不兼容？ – 2012-08-01 19:03:30

我相信，EI8可以处理CSS，而选择是通过jQuery访问DOM完成的。我没有IE8测试，但我认为它应该工作。 – 2012-08-01 19:05:58

我会测试它，并会回复你！谢谢 – larin555 2012-08-01 19:07:12

，而不更改CSS与jQuery（80KB添加到您的网页负载和你的网站的布局JavaScript的依赖），你为什么不添加类到每台li的的？

HTML：

<ul> 
    <li class="normal"><!-- 200px --></li> 
    <li class="narrow"><!--- 70px --></li> 
    <li class="wide"><!-- 220px --></li> 
    ... 
</ul>

CSS：

li { float: left; border: 1px solid #ccc; } 
li.normal { width: 200px; } 
li.narrow { width: 70px; } 
li.wide { width: 220px; }

海事组织，这是一个更清洁，更可读的解决方案，更易于维护和使用的今天imagineably解决您的问题，为每一个浏览器。

来源

2012-08-02 09:24:57 Phortuin

使用jquery而不是CSS的第N个孩子

回答

相关问题