问题描述
我已经搜索了我的具体问题,但找不到...希望你们能提供帮助.
Ive searched for my specific problem and can't find it... I hope any of you guys can help.
我正在尝试让 nth-child 在 IE 中工作 - 现在我读到您可以使用 Jquery 来完成,我该如何在这种情况下实现 jquery?
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?
我也在使用这个 Lib 项目 ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
Im also using this Lib item ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
它在 Firefox 中完美运行,但在 IE 中无法运行 - 请帮助 - 谢谢
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 代码
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"); });
推荐答案
有多种方法可以通过 :nth-child 伪选择器:
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
针对@Unihost 的问题进行了编辑(在下面的评论中):
Edited in response to @Unihost's question (in comments, below):
我如何创建和链接这个 jquery 文件...就像任何普通的 .js 文件一样?
How do I create and link this jquery file... Just like any normal .js file?
当然,唯一要记住的是,您大概是在使用 jQuery 来应用 css,所以我建议您按以下方式使用它:
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');
然后将以下内容(作为演示)添加到您的 css 中:
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; }
我强烈建议不要尝试使用 jQuery 应用所有相关样式,否则它很快就会变得非常笨拙.另外,通过这种方式,您可以在常规 CSS 中使用 nth-child() 伪选择器,并仅在 IE 中包含 jQuery:
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]-->
顺便说一句,如果你想看看它是如何实现的,有一个 JS Fiddle 演示,可能工作.
Incidentally, there's a JS Fiddle demo of intent, if you'd like to see how it might work.