: nth-child ne fonctionne pas dans IE

Question

Ive cherché mon problème spécifique et ne peut pas le trouver ... J'espère que l'un de vous les gars peuvent aider. Je cherche à faire fonctionner nth-child dans IE - maintenant j'ai lu que vous pouvez le faire avec Jquery, comment puis-je implémenter jquery dans cette instance?

Im en utilisant également cet objet Lib ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

Il fonctionne parfaitement dans Firefox, mais pas IE - s'il vous plaît aider - merci

 <div class="info-col"> 
     <h2>Header 1</h2> 
     <a class="imagehref="imagepath">View Image</a> 

     <dl> 
      <dt>Sub header 1</dt> 
      <dd>Copy 1.</dd> 
      <dt>Sub header 2</dt> 
      <dd>Copy2</dd> 
      <dt>Sub header 3</dt> 
      <dd>Copy 3</dd> 
      <dt>Sub header 4</dt> 
      <dd>Copy 4</dd> 
      <dt>Sub header 5</dt> 
      <dd>Copy 5</dd> 
      <dt>Sub header 6</dt> 
      <dd>Copy 6</dd> 
     </dl>   
    </div> 

code Javascript

$(function() { 

// Set up variables 
var $el, $parentWrap, $otherWrap, 
    $allTitles = $("dt").css({ 
     padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5 
     "cursor": "pointer" // make it seem clickable 
    }), 
    $allCells = $("dd").css({ 
     position: "relative", 
     top: -1, 
     left: 0, 
     display: "none" // info cells are just kicked off the page with CSS (for accessibility) 
    }); 

// clicking image of inactive column just opens column, doesn't go to link 
$("#page-wrap").delegate("a.image","click", function(e) { 

    if (!$(this).parent().hasClass("curCol")) {   
     e.preventDefault(); 
     $(this).next().find('dt:first').click(); 
    } 

}); 

// clicking on titles does stuff 
$("#page-wrap").delegate("dt", "click", function() { 

    // cache this, as always, is good form 
    $el = $(this); 

    // if this is already the active cell, don't do anything 
    if (!$el.hasClass("current")) { 

     $parentWrap = $el.parent().parent(); 
     $otherWraps = $(".info-col").not($parentWrap); 

     // remove current cell from selection of all cells 
     $allTitles = $("dt").not(this); 

     // close all info cells 
     $allCells.slideUp(); 

     // return all titles (except current one) to normal size 
     $allTitles.animate({ 
      fontSize: "14px", 
      paddingTop: 5, 
      paddingRight: 5, 
      paddingBottom: 5, 
      paddingLeft: 5 
     }); 

     // animate current title to larger size    
     $el.animate({ 
      "font-size": "20px", 
      paddingTop: 10, 
      paddingRight: 5, 
      paddingBottom: 0, 
      paddingLeft: 10 
     }).next().slideDown(); 

     // make the current column the large size 
     $parentWrap.animate({ 
      width: 320 
     }).addClass("curCol"); 

     // make other columns the small size 
     $otherWraps.animate({ 
      width: 140 
     }).removeClass("curCol"); 

     // make sure the correct column is current 
     $allTitles.removeClass("current"); 
     $el.addClass("current"); 

    } 

}); 

$("#starter").trigger("click"); 

}); 

Answer 1

Il existe différentes façons d'utiliser jQuery avec :nth-child pseudo-sélecteur:

$('dt:nth-child(odd)') // gets every odd-numbered dt 
$('dt:nth-child(even)') // gets every even-numbered dt 
$('dt:nth-child(3n)') // gets every third dt 

---

Rédigé en réponse à @ question de Unihost (dans les commentaires, ci-dessous):

Comment créer et lier ce fichier jquery ... Comme n'importe quel fichier .js normal?

Absolument, la seule chose à retenir est que vous utilisez probablement le jQuery pour appliquer css, donc je vous suggère de l'utiliser de la manière suivante:

$('dt:nth-child(odd)').addClass('oddDts'); 
$('dt:nth-child(even)').addClass('evenDts'); 

Et puis ajoutez ce qui suit (comme une démonstration) à votre css:

dt:nth-child(odd), /* for useful 'modern' broswers that understand */ 
dt.oddDts {  /* referencing the class applied with IE-specific jQuery file */ 
    background-color: #ffa; 
} 
dt:nth-child(even), /* for useful 'modern' broswers that understand */ 
dt.evenDts {  /* referencing the class applied with IE-specific jQuery file */ 
    background-color: #f00; 
} 

Je conseille vivement ne pas essayer d'appliquer tous les styles pertinents avec jQuery, sinon il est très difficile à manier très rapidement. De plus, cette façon, vous pouvez utiliser les nth-child() pseudo-sélecteurs dans votre CSS régulière et inclure le jQuery seulement pour IE: si vous souhaitez voir comment il il y a un JS Fiddle demo of intent

<!--[if ie]> 
    <script src="path/to/jsFile.js" type="text/javascript"></script> 
<![end if]--> 

Soit dit en passant,, pourrait travail.

Answer 2

IE doesn't support :nth-child. Utilisez jQuery avec le sélecteur CSS régulière, par exemple:

$('dl dt:nth-child(2n)') // gets every 2nd dt