：nth-​​child在IE中不工作

Question

我找到了我的具體問題，找不到它......我希望你們中的任何人都可以提供幫助。

我試圖讓nth孩子在IE中工作 - 現在我讀了，你可以用JQuery來做到這一點，我如何在這種情況下實現jQuery？

林也是用這個庫項目ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

它完全在Firefox而不是IE瀏覽器 - 請幫助 - 謝謝

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

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

有不同的方法使用jQuery與:nth-child僞選擇：

$('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 

---

編輯響應@ Unihost的問題（在評論，下面）：

如何創建和鏈接此jquery文件...就像任何正常的.js文件？

當然，要記住的唯一的事情是，你可能使用jQuery的應用CSS，所以我建議以下列方式使用它：

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

，然後添加以下（作爲演示）到你的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; 
} 

我強烈建議不要嘗試應用所有相關的樣式jQuery的，否則它會非常笨拙非常快。另外，這樣，你就可以使用nth-child()僞選擇在正規的CSS，包括jQuery的僅適用於IE：

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

順便說一下，有一個JS Fiddle demo of intent，如果你想看看它是如何威力工作。

Answer 2

IE doesn't support :nth-child。使用jQuery與普通CSS選擇器，如：

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