:nth-child 不在 IE 中工作答案

【问题标题】：:nth-child is not working in IE:nth-child 不在 IE 中工作
【发布时间】：2010-12-06 23:25:33
【问题描述】：

我已经搜索了我的具体问题，但找不到...希望你们能提供帮助。

我正在尝试让 nth-child 在 IE 中工作 - 现在我读到您可以使用 Jquery 来实现，我该如何在这种情况下实现 jquery？

我也在使用这个 Lib 项目 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");

});

【问题讨论】：

您链接的js中没有提到nth-child；您是想在 JavaScript/jQuery 本身还是在 css 中使用它？
您只发布了 HTML。请发布代表您遇到的问题的 javascript 代码。
应该标记为 javascript 而不是 java。
我确实给出了 javascript 代码的链接
Unihost - 请在问题中放置相关的javascript代码。当链接不再有效时，这有助于未来的读者。我查看了您的代码，正如@David 指出的那样，您没有在 javascript 中使用nth-child，所以我不知道问题是什么。

标签： jquery css internet-explorer css-selectors

【解决方案1】：

有多种方法可以通过:nth-child伪选择器使用jQuery：

$('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 的问题进行了编辑（在下面的 cmets 中）：

我如何创建和链接这个 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 应用所有相关样式，否则它很快就会变得非常笨拙。另外，通过这种方式，您可以在常规 CSS 中使用 nth-child() 伪选择器，并仅在 IE 中包含 jQuery：

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

顺便说一句，如果您想看看它可能如何工作，还有一个JS Fiddle demo of intent。

【讨论】：

如何创建和链接这个 jquery 文件...就像任何普通的 .js 文件一样？
我似乎已经通过将其添加到我的 css 中找到了解决方案但是如果你有一个巨大的网格 dt:first-child { background: #b44835; 可能会很长。 } dt:first-child + * { 背景：#b44835; } dt:first-child + * + * { 背景：#ff7d3e; } dt:first-child + * + * + * { 背景：#ff7d3e; } dt:first-child + * + * + * + * { 背景：#ffb03b; } dt:first-child + * + * + * + * + * { 背景：#ffb03b; }
@Unihost，只是一个想法，但说真的，请考虑不要这样做。没有必要，对有用的浏览器（Firefox、Chrome、Safari、Opera...）使用:nth-child()，只需使用条件 cmets 和 jQuery 即可使 IE 加速。 keep-it-simple 原则很好。

【解决方案2】：

IE doesn't support :nth-child。将 jQuery 与常规 CSS 选择器一起使用，例如：

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

【讨论】：