Nth Child using Jquery instead of CSS

Question

I'm using nth-child in my css code, but it does not work in IE 8. I know IE 8 can't handle nth-child but I need to find a way to make it work.

Here's my code :

.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;
   }

So what I need is to find a way to make the nth-child function work on IE 8. Is there any jQuery method I could use to make it work on IE 8?

Thank you!

Answer 1

Instead of altering CSS with jQuery (adding 80kb to your page load and javascript dependency on the layout of your website), why don't you add classes to each of those li's?

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; }

Imo, this is a cleaner, more readable solution that is easier to maintain and solves your problem for each and every browser imagineably in use today.

Answer 2

Yes use the :nth-child selector

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

with the css change

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

e.g.

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