使用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個孩子

回答

相關問題