：nth-​​child在IE中不工作 [英] :nth-child is not working in IE

问题描述

Ive搜索我的具体问题，找不到它...我希望任何人都可以帮助。

我试图让第n个孩子工作在IE - 现在Ive读，你可以做到与Jquery，如何实现jquery在这个实例？

Im也使用这个Lib项目ajax.googleapis.com /ajax/libs/jquery/1.4/jquery.min.js

它在Firefox中可以正常工作，但不是IE - 请帮助 - 感谢

 < div class =info-col> 
< h2>标题1< / h2> 
< a class =imagehref =imagepath>查看图片< / a> 
 
< dl> 
< dt& < / dd> 
< dt>子标题2< / dt> 
< dd> Copy2< / dd> 
< dt>副标题3< / dt> 
< dd>副标题3< / dd> 
< dd> 
< dt>子标题5< / dt> 
< dd>复制5< / dd> 
< dt>子标题6< / dt> 
 < dd>副本6< / dd> 
< / dl> 
< / div> 
  

JavaScript代码

  $（function（）{
 
 // Set （{
 padding：5，//设置填充在这里阻止了一个奇怪的事情）。
 var $ el，$ parentWrap，$ otherWrap，
 $ allTitles =情况，其中它将开始动画在0填充而不是5 
cursor：pointer//使它看起来可点击
}），
 $ allCells = $（dd） .css（{
 position：relative，
 top：-1，
 left：0，
 display：none//信息单元刚刚启动with CSS（for accessibility）
}）; 
 
 //点击图像的非活动列只是打开列，没有去链接
 $（＃page-wrap）。委托（a.image ，function（e）{
 
 if（！$（this）.parent（）。hasClass（curCol））{
 e.preventDefault（）; 
 $ this）.next（）。find（'dt：first'）。click（）; 
} 
 
} 
 
 //点击标题执行
 $（＃page-wrap）。delegate（dt，click，function（）{
 
 // cache this，as always，is good form 
 $ el = $（this）; 
 
 //如果这已经是活动单元格，不做任何事情
 if（！$ el.hasClass（current））{
 
 $ parentWrap = $ el.parent（）。parent（）; 
 $ otherWraps = $（ col）; $（$ parentWrap）; 
 
 //从当前单元格中删除所有单元格
 $ allTitles = $（dt）。not（this）; 
 
 //关闭所有信息单元
 $ allCells.slideUp（）; 
 
 //将所有标题（除了当前标题）返回正常大小
 $ allTitles。 animate（{
 fontSize：14px，
 paddingTop：5，
 paddingRight：5，
 paddingBottom：5，
 paddingLeft：5 
}） ; 
 
 //将当前标题变为更大的大小
 $ el.animate（{
font-size：20px，
 paddingTop：10，
 paddingRight：5，
 paddingBottom：0，
 paddingLeft：10 
}）next（）。slideDown（）; 
 
 //使当前列大型化
 $ parentWrap.animate（{
 width：320 
}）addClass（curCol）; 
 
 //使其他列为小尺寸
 $ otherWraps.animate（{
 width：140 
}）removeClass（curCol）; 
 
 //确保正确的列是当前
 $ allTitles.removeClass（current）; 
 $ el.addClass（current）; 
 
} 
 
}）; 
 
 $（＃starter）。trigger（click）; 
 
}） 
  

解决方案

有多种方法可以使用< =http://api.jquery.com/nth-child-selector/> ：nth-​​child 伪选择器：

  $（'dt：nth-​​child（odd）'）//获取每个奇数dt 
 $（'dt：nth -child（even）'）//获取每个偶数dt 
 $（'dt：nth-​​child（3n）'）//获取每三个dt 
  / pre> 
 
 
 
 
根据@ Unihost的问题（在下面的注释中）进行编辑：
 
 $ b b 
 
 
如何创建和链接这个jquery文件...就像任何正常的.js文件一样？
 
 
绝对的，唯一要记住的是，你可能使用jQuery来应用css，所以我建议以下面的方式使用它：
  $（'dt：nth-​​child（odd）'）。addClass（'oddDts'）; 
 $（'dt：nth-​​child（even）'）。addClass（'evenDts'）; 
  
然后将以下（作为演示）添加到您的css：
  dt：nth-​​child（odd），/ *用于理解* / 
 dt.oddDts {/ *引用类应用于IE特定的jQuery文件* / 
 background-color：#ffa; 
} 
 dt：nth-​​child（even），/ *用于理解* / 
 dt.evenDts {/ *引用应用于特定于IE的jQuery文件* / 
 background-color：＃f00; 
} 
  
 
 
我强烈建议不要试图应用所有相关的样式与jQuery，否则它会非常笨拙非常快。此外，这种方式下，您可以在常规CSS中使用 nth-child（）伪选择器，并将jQuery仅包含在IE中：
 <！ -  [if ie]> 
< script src =path / to / jsFile.jstype =text / javascript>< / script> 
<！[end if]  - > 
  
顺便说一下，有一个 JS Fiddle的意图演示，如果你想看看它可能如何工作。
 
Ive searched for my specific problem and can't find it... I hope any of you guys can help.

Im trying to get nth-child to work in IE - now Ive read that you can do it with Jquery, how do I implement jquery in this instance?

Im also using this Lib item ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

It works perfectly in Firefox but not IE - please help - thanks
        <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 code
$(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");

});

解决方案
There are various ways to use jQuery with :nth-child pseudo-selector:
$('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

Edited in response to @Unihost's question (in comments, below):

  
How do I create and link this jquery file... Just like any normal .js file?
Absolutely, the only thing to remember is that you're presumably using the jQuery to apply css, so I'd suggest using it in the following manner:
$('dt:nth-child(odd)').addClass('oddDts');
$('dt:nth-child(even)').addClass('evenDts');
And then add the following (as a demo) to your 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;
}
I'd strongly advise not attempting to apply all the relevant styles with jQuery, otherwise it gets very unwieldy very quickly. Plus, this way, you can use the nth-child() pseudo-selectors in your regular CSS and include the jQuery only for IE:
<!--[if ie]>
    <script src="path/to/jsFile.js" type="text/javascript"></script>
<![end if]-->
Incidentally, there's a JS Fiddle demo of intent, if you'd like to see how it might work.

                        
这篇关于：nth-​​child在IE中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！